как расширить боковую панель длины моего контента?

75
8

мой сайт: http://web.njit.edu/~dp257/boilerplate/website.html#

я хочу, чтобы мой боковой бар спустился на верхнюю часть нижнего колонтитула или на ту же длину, что и мой контент. Я так не хочу использовать JQuery или что-то в этом роде. Я уверен, что он должен быть в CSS, должен быть простой фиксацией, но im гаснет.

   <div id = "wrapper">
<header id="name" align="center">MY IS117 Website</header>
<div id="primary_links" align="center">
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
</ul>
</div>
<div id="content">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque velit eros, lacinia non mauris at, facilisis iaculis sem. Aenean eu felis elit. Aenean nec sem ac lectus aliquet sagittis eget sit amet urna. Etiam in dignissim nulla. In non nibh pharetra, posuere mi venenatis, consequat ipsum. Quisque dapibus porttitor posuere. Maecenas porttitor nibh sit amet lacinia vehicula. Nullam sit amet urna gravida, gravida leo vel, ultrices ante. Sed accumsan nibh nec erat dapibus, ut ultrices nisi elementum. Praesent in enim at nunc consectetur cursus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur quis scelerisque ipsum. Quisque vulputate consectetur egestas. Etiam non tincidunt urna.
</p>
<p>
Aenean fringilla sed urna a ultrices. Aliquam non augue in libero venenatis sodales at ut eros. Nunc ac arcu a justo luctus ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas sed molestie leo, vel placerat massa. Nullam at eros ac nunc malesuada fermentum nec vel mi. Nulla convallis mattis facilisis. Vivamus urna quam, tincidunt id venenatis in, porttitor quis lectus. Donec eu vehicula quam, sit amet sollicitudin risus. Nullam nec dapibus tortor. Nam in consectetur urna. Aenean enim eros, ullamcorper vitae mauris at, sollicitudin blandit felis. Ut ac odio blandit, sodales tortor sed, aliquam est.
</p>
<p>
Praesent at sagittis augue. Sed libero ipsum, pharetra eget ante nec, laoreet tempor leo. Cras libero magna, mattis in ligula a, rutrum volutpat libero. Morbi tincidunt lectus eget vehicula eleifend. Nullam pulvinar sapien non porttitor pharetra. Fusce porttitor nunc sit amet iaculis rhoncus. Nullam et est vel enim commodo interdum ac vel odio. Duis pretium lorem ante, condimentum laoreet lectus aliquam at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent ornare dui vel erat hendrerit, commodo tempus eros vehicula. Morbi dapibus est tristique ligula consequat adipiscing. Nulla non massa nibh. Praesent justo quam, eleifend sed blandit eget, pharetra in augue.
</p>
<p>
Vestibulum tincidunt erat at justo adipiscing condimentum. Morbi ante eros, sagittis at augue a, feugiat malesuada quam. Mauris molestie leo a mi accumsan pretium. Vestibulum tempus mi et sagittis convallis. In ac purus porta nisi congue condimentum. Donec augue lectus, eleifend consectetur suscipit sit amet, volutpat sed enim. Quisque eget enim erat. Cras molestie nisi sed leo elementum, et eleifend est sollicitudin. Quisque sed elit at massa tincidunt vehicula sed non leo. Aenean condimentum, purus et consectetur auctor, nunc diam porttitor sapien, rutrum accumsan nisi lectus at ipsum. Duis blandit nulla felis, a dictum odio egestas pretium. Nullam feugiat justo mi, vel pretium mauris posuere vitae. Duis at adipiscing tortor. Morbi laoreet augue vel ullamcorper venenatis.
</p>
<p>
In porttitor orci nec turpis tempus, in faucibus mauris luctus. Aliquam egestas convallis sollicitudin. Sed congue, ante id porttitor tristique, odio purus molestie lectus, id egestas nisl magna vitae felis. Donec imperdiet lectus sem, vel varius sem aliquam vel. Morbi quis leo suscipit, vulputate nisi at, posuere velit. Duis lorem justo, pharetra id mi ut, egestas laoreet dui. Mauris ultricies libero sit amet ligula porttitor, eget sagittis neque ornare. Suspendisse tristique metus nec auctor volutpat.
</p>
</div>
<!-- content -->
<div id="sidebar">
<div id="secondary_links">
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
</ul>
</div>
</div>
<div id="footer">Footer</div>
</div>
<!-- wrapper -->

CSS

#header {
background-color: cyan;
width: 100px;
height: 100px;
padding: 20px;
margin: 30px;
border: 5px solid;
}

#name {
border: 1px solid;
padding-left: 31px;
padding-right: 31px;
margin-left: auto;
margin-right: auto;
}

#wrapper {
width: 898px;
margin-left: auto;
margin-right: auto;
}

#primary_links li {
display: inline;
}

#primary_links {
height: 75px;
line-height: 75px;
border: 1px solid;
}

#primary_links a {
color: black;
}

#secondary_links ul, #primary_links ul {
margin: 0px;
padding: 0px;
}

#secondary_links li {
list-style: none;
/* gets rid of bullets */;
}

#sidebar {
width: 338px;
float: left;
border: 1px solid;
}

#secondary_links {
/*width:340px; temporary
float:right; put in own div fiix prob*/;
}

#footer {
/*margin-left:508px;
margin-right:230px;*/
clear: both;
background-color: green;
}

#content {
width: 508px;
padding-left: 23px;
padding-right: 23px;
border: 1px solid;
float: left;
}

спросил(а) 2021-01-19T18:24:20+03:00 2 месяца, 4 недели назад
1
Решение
87

Вы хотите, чтобы ваша боковая панель была справа? С той же высотой, что и ваш контент? Если это правильно, вы можете использовать float: right; на вашем #sidebar. Поместите свой контент и боковую панель в новый div, дайте ему класс вроде: .wrapper. И установите фоновое изображение на .wrapper. Если изменение высоты изменится, фон будет повторяться.

.wrapper {
width: 100%;
background: url('yourimage') repeat;
/* float: left; */
overflow: hidden;
}

Я надеюсь, вы понимаете, это. Я также могу привести вам пример, если хотите.

EDIT: вы можете использовать float left, чтобы дать родительскому div значение высоты для детей. Или вы можете использовать overflow: hidden; ,

ответил(а) 2021-01-19T18:24:20+03:00 2 месяца, 4 недели назад
62

Использование:

Для #sidebar: clear: right; Для #footer: clear: both;

Afer, чтобы нижний колонтитул снизу, а боковая панель - вправо.

ответил(а) 2021-01-19T18:24:20+03:00 2 месяца, 4 недели назад
61

Добавьте обертку div вокруг #content и #sidebar. Я назвал div- #content-sidebar-wrap. Добавьте display:table в #content-sidebar-wrap и добавьте display:table-cell в #content и #sidebar.

#content-sidebar-wrap{
display:table;
height:100%;
}

#content {
width: 508px;
padding-left: 23px;
padding-right: 23px;
border: 1px solid;
float: left;
display:table-cell;
}

#sidebar {
width: 338px;
float: left;
border: 1px solid;
height:100%;
display:table-cell;
}


Проверьте это: http://jsfiddle.net/LHX9Z/

ответил(а) 2021-01-19T18:24:20+03:00 2 месяца, 4 недели назад
44

Легкий способ заставить это работать правильно, просто добавьте огромную padding-bottom в .sidebar, а затем .sidebar ее с тем же (но отрицательным) margin-bottom. Просто убедитесь, что вы установили overflow:hidden для класса упаковки. Я бы рекомендовал вам перемещать header и footer снаружи обертки.

FIDDLE

ответил(а) 2021-01-19T18:24:20+03:00 2 месяца, 4 недели назад
-4

просто попробуйте это сейчас

#wrapper {
background: none repeat scroll 0 0 #B3D4FC;
margin-left: auto;
margin-right: auto;
width: 898px;
}
#primary_links {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid;
height: 75px;
line-height: 75px;
}

#name {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid;
margin-left: auto;
margin-right: auto;
padding-left: 31px;
padding-right: 31px;
}

#sidebar {
background-color: #ADD8E6;
border: 1px solid;
float: right;
width: 290px;
}

ответил(а) 2021-01-19T18:24:20+03:00 2 месяца, 4 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема