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

Высота боковой панели 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 ]

1 голос
/ 06 октября 2011

Я столкнулся с той же проблемой, что и Джон. TheLibzter поставил меня на правильный путь, но изображение, которое должно остаться внизу боковой панели, не было включено Поэтому я внес некоторые коррективы ...

Важно:

  • Положение div, который содержит боковую панель и содержимое (#bodyLayout). Это должно быть относительным.
  • Положение div, который должен оставаться внизу sidbar (#sidebarBottomDiv). Это должно быть абсолютным.
  • Ширина содержимого + ширина боковой панели должна быть равна ширине страницы (#container)

Вот CSS: 

    #container
    {
        margin: auto;
        width: 940px;
    }
    #bodyLayout
    {
        position: relative;
        width: 100%;
        padding: 0;
    }
    #header
    {
        height: 95px;
        background-color: blue;
        color: white;
    }
    #sidebar
    {
        background-color: yellow;
    }
    #sidebarTopDiv
    {
        float: left;
        width: 245px;
        color: black;
    }
    #sidebarBottomDiv
    {
        position: absolute;
        float: left;
        bottom: 0;
        width: 245px;
        height: 100px;
        background-color: green;
        color: white;
    }
    #content
    {
        float: right;
        min-height: 250px;
        width: 695px;
        background-color: White;
    }
    #footer
    {
        width: 940px;
        height: 75px;
        background-color: red;
        color: white;
    }
    .clear
    {
        clear: both;
    }

А вот HTML: 

<div id="container">
    <div id="header">
        This is your header!
    </div>
    <div id="bodyLayout">
        <div id="sidebar">
            <div id="sidebarTopDiv">
                This is your sidebar!                   
            </div>
            <div id="content">                  
            This is your content!<br />
            The minimum height of the content is set to 250px so the div at the bottom of
            the sidebar will not overlap the top part of the sidebar.
            </div>
            <div id="sidebarBottomDiv">
                This is the div that will stay at the bottom of your footer!
            </div>
            <div class="clear" />
        </div>
    </div>
</div>
<div id="footer">
    This is your footer!
</div>
0 голосов
/ 25 июня 2014

Позиция абсолютная, верхняя: 0 и нижняя: 0 для боковой панели и относительная позиция для обертки (или контейнера), содержащей все элементы, и все готово!

0 голосов
/ 31 января 2014

используйте фон тела, если вы используете боковую панель фиксированной ширины, чтобы получить изображение той же ширины, что и боковая панель. также добавьте background-repeat: repeat-y в свои коды CSS.

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

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

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...