У меня проблемы с заполнением. Моя боковая панель шириной 318 пикселей, мой контент имеет ширину 642 пикселя, а мой нижний колонтитул - 642 пикселя, и мой контент. Моя боковая панель и содержимое и имеют прописку 20 пикселей вокруг, но моя боковая панель, как предполагается, будет находиться на полной высоте в нижней части страницы и расширяться всякий раз, когда есть больше содержимого, которое также толкает нижний колонтитул. Извините, если это слишком много информации, но я стараюсь дать как можно больше деталей.Проблемы с загрузкой с боковой панелью/содержание/нижний колонтитул
Here is a link to what I have so far Вы также можете просмотреть источник, если необходимо для полного HTML. Я только понял, что элементы, о которых я говорю, нужны, но это на всякий случай.
HTML:
<!-- SIDEBAR -->
<div id="sidebar">
<h1>Caul/Cbua</h1>
<div class="sidetext">
Lorem ipsumdolor sit amet, consectetur adipiscing elit. Nam laoreet mi c est dignissim, at auctor mi tristique.
</div>
<h1>Commit</h1>
<div class="sidelink">
<ul>
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Lorem Ipsum</a></li>
</ul>
</div>
</div>
<!-- CONTENT -->
<div id="content">
<h1>News</h1>
<div class="article">
<img class="articleimg" src="../../Slicing Images/news images/caul.png" width="84" height="65" alt="caul" />
<h2>Lorem Ipsum</h2>
<h3>Friday, August 16th</h3>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
<!-- FOOTER -->
<div id="footer">
© Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
CSS:
/* Sidebar */
#sidebar {
background-color: #e7d9c9;
background-image: url('/imgs/map.png');
background-repeat: no-repeat;
/* height 100? */
width: 318px;
float: left;
padding-bottom: 20px;
}
.sidetext {
padding: 5px 20px;
font-size: 18px;
font-family: Helvetica Neue;
padding-bottom: 20px;
}
.sidelink {
padding-bottom: 20px;
margin: 0;
padding: 0;
width:300px;
}
.sidelink ul {
margin: 0;
padding: 0;
margin-left: 20px;
}
.sidelink li {
display: block;
list-style: none;
}
.sidelink li a {
display:block;
font-family: Helvetica Neue;
font-size:16px;
color:#FFF;
text-decoration:none;
background-color:#1e416f;
padding:5px;
border-left:10px solid #FFF;
padding-bottom: 20px;
}
.sidelink li a:hover {
border-left:14px solid #1e416f;
background-color:#e7d9c9;
color: #1e416f;
}
h5 {
font-family: Helvetica Neue: Light;
font-size: 24px;
color: #517f9c;
}
/* Content */
#content {
width: 642px;
float: right;
}
.article {
padding: 5px 20px;
}
.articleimg {
float: left;
padding-right: 25px;
}
/* Footer */
#footer {
font-family: Helvetica Neue: Regular;
font-size: 12px;
color: #94b9c4;
clear: both;
width: 100%;
}
В вашем примере показано, что боковая панель находится в верхней части нижнего колонтитула? если вы заходите в инспектор и удаляете элемент нижнего колонтитула, боковая панель расширяется до нижней части страницы. Поэтому я немного немного смущен, когда вы говорите, что «боковая панель должна идти в полную высоту в нижней части страницы», вы хотите, чтобы нижний колонтитул находился справа от боковой панели? – samuelkobe
Привет, Самуил. Спасибо за ответ. В принципе, мне бы хотелось, чтобы вы видели в моем примере, как раз правильно, так как я не верю, что для правильного CSS везде есть «padding-bottom». Разве нет способа иметь заполнение 20px вокруг всего на боковой панели и все содержимое, как показано в моем примере? Теперь я также не уверен, где разместить мой нижний колонтитул, потому что я хотел бы, чтобы он был ближе к основанию и встроен в контент. Таким образом, в основном там, где сейчас, просто толкают вниз и вид «липкого» и соответствуют контенту. –
Кроме того, если я добавляю больше контента, боковая панель не будет полностью заполняться. –