Высота боковой панели CSS 100% - PullRequest
Новая
       6

Высота боковой панели CSS 100%

69 голосов
/ 26 апреля 2009

Я часами бился головой о стену, пытаясь разобраться в этой проблеме и подумать, что это что-то маленькое, чего мне не хватает. Я искал в Интернете, но ничего не нашел, кажется, работает. HTML-код: 

<body>
  <div id="header">
    <div id="bannerleft">
    </div>

    <div id="bannerright">
      <div id="WebLinks">
        <span>Web Links:</span>
        <ul>
          <li><a href="#"><img src="../../Content/images/MySpace_32x32.png" alt="MySpace"/></a></li>
          <li><a href="#"><img src="../../Content/images/FaceBook_32x32.png" alt="Facebook"/></a></li>
          <li><a href="#"><img src="../../Content/images/Youtube_32x32.png" alt="YouTube"/></a></li>
        </ul>
      </div>
    </div>
  </div>
  <div id="Sidebar">
    <div id="SidebarBottom">
    </div>
  </div>
  <div id="NavigationContainer">
    <ul id="Navigation">
      <li><a href="#">Nav</a></li>
      <li><a href="#">Nav</a></li>
      <li><a href="#">Nav</a></li>
      <li><a href="#">Nav</a></li>
      <li><a href="#">Nav</a></li>
      <li><a href="#">Nav</a></li>
    </ul>
  </div>
  <div id="Main">
    <!-- content -->
  </div>
</body>

Мой полный CSS: 

* {
  margin: 0px;
  padding: 0px;
}

body {
  font-family: Calibri, Sans-Serif;
  height: 100%;
}

#header {
  width: 100%;
  z-index: 1;
  height: 340px;
  background-image: url("../../Content/images/bannercenter.gif");
  background-repeat: repeat-x;
}

#header #bannerleft {
  float: left;
  background-image: url("../../Content/images/bannerleft.gif");
  background-repeat: no-repeat;
  height: 340px;
  width: 439px;
  z-index: 2;
}

#bannerright {
  float: right;
  background-image: url("../../Content/images/bannerright.gif");
  background-repeat: no-repeat;
  width: 382px;
  height: 340px;
  background-color: White;
  z-index: 2;
}

#Sidebar {
  width: 180px;
  background: url("../../Content/images/Sidebar.png") repeat-y;
  z-index: 2;
  height: 100%;
  position: absolute;
}

#SidebarBottom {
  margin-left: 33px;
  height: 100%;
  background: url("../../Content/images/SidebarImage.png") no-repeat bottom;
}

#NavigationContainer {
  position: absolute;
  top: 350px;
  width: 100%;
  background-color: #bbc4c3;
  height: 29px;
  z-index: 1;
  left: 0px;
}

#Navigation {
  margin-left: 190px;
  font-family: Calibri, Sans-Serif;
}

#Navigation li {
  float: left;
  list-style: none;
  padding-right: 3%;
  padding-top: 6px;
  font-size: 100%;
}

#Navigation a:link, a:active, a:visited {
  color: #012235;
  text-decoration: none;
  font-weight: 500;
}

#Navigation a:hover {
  color: White;
}

#WebLinks {
  float: right;
  color: #00324b;
  margin-top: 50px;
  width: 375px;
}

#WebLinks span {
  float: left;
  margin-right: 7px;
  margin-left: 21px;
  font-size: 10pt;
  margin-top: 8px;
  font-family: Helvetica;
}

#WebLinks ul li {
  float: left;
  padding-right: 7px;
  list-style: none;
}

#WebLinks ul li a {
  text-decoration: none;
  font-size: 8pt;
  color: #00324b;
  font-weight: normal;
}

#WebLinks ul li a img {
  border-style: none;
}

#WebLinks ul li a:hover {
  color: #bcc5c4;
}

Я бы хотел, чтобы боковая панель растягивалась по высоте с содержимым моей страницы и оставляла нижнее изображение боковой панели всегда в нижней части боковой панели.

Ответы [ 14 ]

93 голосов
/ 10 декабря 2011

Это сработало для меня 

.container { 
  overflow: hidden; 
  .... 
} 

#sidebar { 
  margin-bottom: -5000px; /* any large number will do */
  padding-bottom: 5000px; 
  .... 
}
28 голосов
/ 28 декабря 2012

До тех пор, пока flexbox CSS не станет более распространенным, вы всегда можете просто расположить боковую панель, разместив ее на нулевом пикселе от верха и низа, а затем установить поле в вашем основном контейнере для компенсации.

JSFiddle

http://jsfiddle.net/QDCGv/

HTML 

<section class="sidebar">I'm a sidebar.</section>

<section class="main">I'm the main section.</section>

CSS 

section.sidebar {
  width: 250px;
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: green;
}

section.main { margin-left: 250px; }

Примечание : Это очень простой способ сделать это, но вы обнаружите, что bottom означает не «нижнюю часть страницы», а «нижнюю часть окна». Боковая панель, вероятно, неожиданно закончится, если ваш основной контент прокрутится вниз.

24 голосов
/ 26 апреля 2009

ОБНОВЛЕНИЕ: Поскольку этот ответ по-прежнему набирает голоса как вверх, так и вниз, и на момент написания восемь лет : в настоящее время, вероятно, существуют более совершенные методы. Оригинальный ответ следует ниже.

Очевидно, вы ищете Искусственные колонки техника: -)

В зависимости от того, как рассчитывается свойство высоты, вы не можете установить height: 100% внутри чего-либо, имеющего авто-высоту.

13 голосов
/ 17 января 2013

Я бы использовал таблицы CSS для достижения 100% высоты боковой панели.

Основная идея - обернуть боковую панель и основные элементы div в контейнер.

Дайте контейнеру display:table

И дайте 2 дочерним элементам (боковой и основной) a display: table-cell

Вот так .. 

#container {
display: table;
}
#main {
display: table-cell;
vertical-align: top;
}
#sidebar {
display: table-cell;
vertical-align: top;
}

Взгляните на это LIVE DEMO , где я изменил вашу начальную разметку, используя вышеописанную технику (я использовал цвета фона для различных элементов div, чтобы вы могли видеть, какие из них есть какие)

8 голосов
/ 18 сентября 2015

Flexbox (http://caniuse.com/#feat=flexbox)

Сначала оберните нужные столбцы в элементе div или разделе, например: 

<div class="content">
    <div class="main"></div>
    <div class="sidebar"></div>
</div>

Затем добавьте следующий CSS: 

.content {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
4 голосов
/ 01 февраля 2014

В дополнение к ответу @montrealmike, могу ли я просто добавить свою адаптацию?

Я сделал это: 

.container { 
  overflow: hidden; 
  .... 
} 

#sidebar { 
  margin-bottom: -101%;
  padding-bottom: 101%; 
  .... 
}

Я сделал «101%», чтобы удовлетворить (крайне редкую) возможность, что кто-то может просматривать сайт на огромном экране с высотой более 5000 пикселей!

Отличный ответ, монреальмике. У меня это отлично сработало.

4 голосов
/ 23 августа 2010

Я сталкивался с этой проблемой несколько раз в разных проектах, но я нашел решение, которое работает для меня. Вы должны использовать четыре тега div - один, который содержит боковую панель, основное содержимое и нижний колонтитул.

Сначала создайте элементы стиля в вашей таблице стилей: 

#container {
width: 100%;
background: #FFFAF0;
}

.content {
width: 950px;
float: right;
padding: 10px;
height: 100%;
background: #FFFAF0;
}

.sidebar {
width: 220px;
float: left;
height: 100%;
padding: 5px;
background: #FFFAF0;
}

#footer {
clear:both;
background:#FFFAF0;
}

Вы можете редактировать различные элементы по своему усмотрению, просто убедитесь, что вы не изменили свойство нижнего колонтитула «clear: both» - это очень важно оставить.

Затем просто настройте свою веб-страницу следующим образом: 

<div id=”container”>
<div class=”sidebar”></div>
<div class=”content”></div>
<div id=”footer”></div>
</div>

Я написал более подробное сообщение в блоге об этом по адресу http://blog.thelibzter.com/how-to-make-a-sidebar-extend-the-entire-height-of-its-container. Пожалуйста, дайте мне знать, если у вас есть какие-либо вопросы. Надеюсь, это поможет!

2 голосов
/ 16 октября 2013

Полагаю, сегодня можно было бы использовать для этого flexbox. См. Пример Святого Грааля .

2 голосов
/ 26 апреля 2009

Возможно Многостолбцовые макеты Вылезти из коробки - это то, что вы ищете?

1 голос
/ 14 марта 2014

Я понимаю, что это старый пост, но я пытался что-то придумать, чтобы у моего сайта была боковая панель. Будет ли это работать? 

#sidebar-background
{
    position:fixed;
    width:250px;
    top:0;
    bottom:0;
    background-color:orange;
}

#content-background
{
    position:fixed;
    right:0;
    top:0;
    bottom:0;
    left:250px;
    background-color:pink;
}

#sidebar
{
    float:left;
    width:250px;
}

#content
{
    float:left;
    width:600px;
}

<div id="sidebar-background"></div>
<div id="content-background"></div>

<div id="sidebar">Sidebar stuff here</div>
<div id="content">Stuff in here</div>
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...