Примусово встановити висоту бічної панелі на 100% за допомогою CSS (із липким зображенням внизу)?

76

Я годинами б’юся головою об стіну, намагаючись з’ясувати це питання, і думаю, що це, мабуть, щось дрібне, чого мені не вистачає. Я шукав в Інтернеті, але нічого, що знайшов, здається, не працює. 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;
}

Я хотів би, щоб бічна панель розширювалася у висоту разом із вмістом моєї сторінки, а зображення нижньої частини бічної панелі залишало завжди внизу бічної панелі.

css  sidebar  sticky 
— Джон
джерело
Ви можете також показати свою розмітку?
— Бйорн,
Відряджений, націнка була б підмогою. І дозволить нам запропонувати конкретні CSS або пропозиції.
— Девід каже, щоб відновити Моніку
— Прашобх

Відповіді:

27

ОНОВЛЕННЯ: Оскільки ця відповідь все ще отримує голоси як вгору, так і вниз, і на момент написання статті вісім років : Напевно, зараз існують кращі методи. Оригінальна відповідь наведена нижче.

Очевидно, що ви шукаєте техніку штучних колон :-)

Як обчислюється властивість висоти, ви не можете встановити height: 100%все, що має автоматичну висоту.

— Арве Систад
джерело
Використання техніки штучних колон було найближчим, що мені вдалося отримати. Проблеми, з якими я зіткнувся, полягали в тому, що я не міг перекрити бічну панель зверху навігаційної панелі, і я не міг зрозуміти, як розмістити зображення "нижньої бічної панелі" завжди внизу бічної панелі.
— Джон
Якщо у вас є один головний-контейнер, в якому у вас є фон для всієї сторінки, ви можете використовувати бічну панель дна-зображення , як це: background: url(blabla) no-repeat bottom;. Виконання накладання бічної панелі вгорі на панелі навігації також може бути вирішене шляхом "емуляції" бічної панелі у фоновому режимі панелі навігації. Якщо для вас це не має сенсу, ви б склали ескіз того, чого намагаєтесь досягти? :)
— Арве Систад
помістіть нижнє зображення бічної панелі в нижній колонтитул сайту, але використовуйте відносне або абсолютне положення, або негативне верхнє поле, tp підніміть його, щоб воно з’явилося зверху бічної панелі.
— Wheresrhys
4
Відповіді можуть бути дорогими, доступними або дешевими, і ця відповідь є дешевою.
— Джон
4
Вони також можуть бути старими та відповідними своєму часу.
— Арве Систад
96

Це спрацювало для мене

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

#sidebar { 
  margin-bottom: -5000px; /* any large number will do */
  padding-bottom: 5000px; 
  .... 
}
— montrealmike
джерело
6
це чудово, будь-які мінуси?
— кінет
Ідеально для мене також! Дякую!
— Deekor
12
Я знайшов мінус у цьому. Якщо ви спробуєте встановити посилання на певне розташування всередині .container за допомогою <a href="#location">, .container прокрутить до цього місця, залишаючи все, що над ним, прихованим. Дивіться це: jsfiddle.net/PTvcS - ви можете змінити переповнення на автоматичне, щоб отримати кращий вигляд.
— Норберт
2
я відчуваю, що знайшов Святий Грааль. цей трюк чудовий, у мене тоді було стільки проблем з бічними панелями ..
— nakajuice
1
На випадок, якщо хтось ще сліпий, як я: Не забувайте про overflow: hiddenчастину, або трапляться погані речі.
— Дудад
29

Поки флексбокс 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; }

Примітка : Це über простий спосіб зробити це, але ви знайдете bottomне означає "внизу сторінки", а "внизу вікна". Бічна панель, ймовірно, закінчиться неналежним чином, якщо ваш основний вміст прокрутиться вниз.

— Адам Грант
джерело
Радий, що у вас вийшло, дивіться мою замітку про його недоліки.
— Адам Грант,
Працює і для мене. Дякую! Я думаю, що це найкращий спосіб.
— Fuhrmann
1
Але якщо у вас багато вмісту, тоді, коли ви прокручуєте вниз, бічна панель більше не буде заповнювати всю висоту.
— TheYaXxE
Правильно, і я зазначив це внизу моєї відповіді.
— Адам Грант
1
@wranvaud Ось такий: stackoverflow.com/a/32639892/393243
— Адам Грант
12

Я б використовував таблиці css для досягнення 100% висоти бічної панелі.

Основна ідея - обернути бічну панель та основні divs в контейнер.

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

І дайте 2 дочірні div (бічну та основну) a display: table-cell

Як так ..

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

Погляньте на цю РЕМОНТНУ ДЕМО, де я змінив вашу початкову розмітку, використовуючи вищезазначену техніку (я використовував кольори тла для різних div, щоб ви могли побачити, які це які)

— Даніельд
джерело
1
Ого, це приголомшливо - макети таблиць без таблиць!
— Dom
1
Це чудово, дякую. Багато інших, здавалося, працювали для невеликого вмісту, а потім розвалилися. Цей ні, дякую.
— Michael Kennedy
9

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;
}
— 9ete
джерело
2
Схоже, це найкраща відповідь у ці дні.
— MarkSkayff
1
Можливо, ви також захочете додати, flex-flow:wrapякщо елементи вашої сторінки перестануть
— обгортатися
5

Крім відповіді @montrealmike, чи можу я просто додати свою адаптацію?

Я зробив це:

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

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

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

Хоча чудова відповідь, montrealmike. У мене це спрацювало чудово.

— Ллойд Джонс
джерело
4

Я кілька разів стикався з цим питанням у різних проектах, але знайшов рішення, яке мені підходить. Вам потрібно використовувати чотири теги 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 . Будь ласка, повідомте мене, якщо у вас виникнуть запитання. Сподіваюся, це допомагає!

— TheLibzter
джерело
1
Три примітки: 1. Ви не можете використовувати ідентифікатор "footer" зараз у HTML 5 або 4.01 Transitional. Ви повинні назвати це "колонка-нижній колонтитул" або щось інше, щоб воно з'явилося та очистилося. 2. Як видно з допису в блозі, це насправді не розширює бічну панель, а просто розміщує задній фон, який виглядає однаково. Отже, якщо ваша бічна панель кольорова, вам потрібно додати div цього кольору. 3. Ширина пікселів мені все псує, але ширина: 20% та ширина: 80% працюють, якщо у вас увімкнено розмір коробки: border-box.
— Noumenon
1

Я стикався з тією ж проблемою, що і Джон. 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>
— Krizzz
джерело
1

Я усвідомлюю, що це стара публікація, але я намагався щось розробити, щоб мій сайт мав бічну панель. Чи вдасться це?

#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>
— КрісХігс
джерело
0

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

— Бьорн
джерело
0

використовуйте фон тіла, якщо ви використовуєте бічну панель фіксованої ширини, надайте таку ж ширину зображення, як і ваша бічна панель. також помістіть background-repeat: repeat-y у ваші коди css.

— Аджит Бхандарі
джерело
0

Позиція абсолютна, верхня: 0 та нижня: 0 для бічної панелі та відносна позиція для обгортки (або контейнера), що вміщує всі елементи, і все готово!

— Вінсент В.
джерело
0

Спробуйте це. Він змушує навігаційну панель рости у міру додавання вмісту та утримує центральну область по центру.

   <html>
        <head>
            <style>
                    section.sidebar {
          width: 250px;
          min-height:100vh;
          position: sticky;
          top: 0;
          bottom: 0;
          background-color: green;
        }

        section.main { position:sticky; top:0;bottom:0;background-color: red; margin-left: 250px;min-height:100vh; }
            </style>
            <script lang="javascript">
            var i = 0;
            function AddOne()
            {
                for(i = 0;i<20;i++)
                {
                var node = document.createElement("LI");
                var textnode = document.createTextNode(' Water ' + i.toString());

                node.appendChild(textnode);
                document.getElementById("list").appendChild(node);
                }


            }
            </script>
        </head>
        <body>
                <section class="sidebar">
                    <button id="add" onclick="AddOne()">Add</button>
                    <ul id="list">
                        <li>bullshit 1</li>
                    </ul>
                </section>
                <section class="main">I'm the main section.</section>
        </body>    
    </html>
— WebBoy
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.