Как разместить DIV, чтобы заполнить все доступное пространство между DIV верхнего и нижнего колонтитула? - PullRequest
Новая
       20

Как разместить DIV, чтобы заполнить все доступное пространство между DIV верхнего и нижнего колонтитула?

7 голосов
/ 11 сентября 2008

Допустим, у меня есть родительский DIV. Внутри есть три дочерних DIV: верхний и нижний колонтитулы. Заголовок прикреплен к верхней части родительского элемента и заполняет его горизонтально. Нижний колонтитул прикреплен к нижней части родительского элемента и заполняет его также горизонтально. Содержимое должно заполнять все пространство между верхним и нижним колонтитулами.

Родитель должен иметь фиксированную ширину и высоту. Контент DIV должен заполнить все доступное пространство между верхним и нижним колонтитулом. Когда размер содержимого DIV содержимого превышает пространство между верхним и нижним колонтитулами, содержимое DIV должно отображать полосы прокрутки и разрешать соответствующую прокрутку , чтобы содержимое нижнего колонтитула никогда не закрывалось, а нижний колонтитул неясное содержание.

Теперь самое сложное: вы заранее не знаете ни высоту, ни нижний колонтитул (например, верхний и нижний колонтитулы заполняются динамически). Как можно позиционировать контент без использования JavaScript ?

Пример: 

<div style="position : relative; width : 200px; height : 200px; background-color : #e0e0ff; overflow : hidden;">
    <div style="background-color: #80ff80; position : absolute; left : 0; right : 0; top : 0;">
    header 
    </div>
    <div style="background-color: #8080ff; overflow : auto; position : absolute;">
    content (how to position it?)
    </div>
    <div style="background-color: #ff8080; position : absolute; bottom : 0px; left :0; right : 0;">
    footer 
    </div>    
</div>

Для дальнейшего разъяснения этого события - целевой макет, которого я пытаюсь достичь, будет использоваться в бизнес-веб-приложении. Родительский DIV будет иметь фиксированный, но неизвестный размер (например, он будет точно соответствовать размеру окна просмотра браузера, изменяя размеры вместе с размером окна браузера пользователем) , Давайте назовем родительский DIV «экраном».

Заголовок будет содержать набор фильтрующих элементов управления (таких как текстовые поля, раскрывающиеся списки и кнопка «фильтр»), которые должны переноситься на следующую строку, если недостаточно горизонтального пространства (поэтому его высота может измениться в любое время для размещения строки ломки). Заголовок всегда должен быть виден и прикреплен к верхней части "экрана".

Нижний колонтитул будет содержать набор кнопок, как в диалоговом окне. Они также могут переноситься на следующую строку, если не хватает места по горизонтали. Нижний колонтитул должен быть прикреплен к нижней части «экрана», чтобы быть доступным и видимым в любое время.

Содержимое будет содержать «экранное» содержимое, например поля диалога и т. Д. Если полей слишком мало, остальная часть содержимого будет «пустой» (в этом случае нижний колонтитул не должен начинаться сразу после содержимого, но все же быть прикреплен к нижней части "экрана", который является фиксированным размером). Если полей слишком много, контент DIV предоставит полосы прокрутки для доступа к скрытым элементам управления (в этом случае контент DIV не должен выходить за нижний колонтитул, так как полоса прокрутки будет частично скрыта).

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

Ответы [ 6 ]

4 голосов
/ 11 сентября 2008

Я собираюсь унизиться для этого, но это звучит как работа за столом.

То, что вы пытаетесь сделать, это установить общую высоту трех смежных делений как единое целое, и таблица 1x3 с высотой 100% на самом деле является более чистым решением.

1 голос
/ 24 февраля 2014

Чистое решение CSS 1 - Flexbox:

Вы можете создать столбец div с таким поведением, используя свойство CSS3 display: flex; ( см. Спецификации W3 )

Используя обертку, вы можете выровнять все в столбце с помощью объявления flex-direction: column;, а затем заполнить вертикальное пространство justify content: space-between; и height: 100vh;. Тогда все, что вам нужно сделать, это расширить элемент контента с помощью flex: 1 0 0; и назначить ему полосу прокрутки с помощью overflow-y: auto;.

Примечание по поддержке браузера - Хотя flexbox поддерживается большинством современных браузеров, все же есть несколько ограничений (см .: http://caniuse.com/#feat=flexbox). Я бы рекомендовал использовать -webkit- и -ms- префиксы.

Рабочий пример : см. Следующий фрагмент и этот jsfiddle . 

body {
    display: -webkit-flex; /* Safari 6.1+ */
    display: -ms-flex; /* IE 10 */ 
    display: flex;
    -webkit-flex-direction: column; /* Safari 6.1+ */
    -ms-flex-direction: column; /* IE 10 */
    flex-direction: column;
    -webkit-justify-content: space-between; /* Safari 6.1+ */
    -ms-justify-content: space-between; /* IE 10 */
    justify-content: space-between; /* Header top, footer bottom */
    height: 100vh;  /* Fill viewport height */
}
main {
    -webkit-flex: 1 0 0; /* Safari 6.1+ */
    -ms-flex: 1 0 0; /* IE 10 */
    flex: 1 0 0; /* Grow to fill space */
    overflow-y: auto; /* Add scrollbar */
    height: 100%; /* Needed to fill space in IE */
}
header, footer {
    -webkit-flex: 0 0 auto; /* Safari 6.1+ */
    -ms-flex: 0 0 auto; /* IE 10 */
    flex: 0 0 auto;
}



/* Make it look a little nicer */
body {
    margin: 0;
    background-color: #8080ff;
}
header {
    background-color: #80ff80; 
}
footer {
    background-color: #ff8080;
}
p {
    margin: 1.25rem;
}
<body>
    <header>
        <p>header</p> 
    </header>
    <main>
        <article>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pellentesque lobortis augue, in porta arcu dapibus dapibus. Suspendisse vulputate tempus venenatis. Pellentesque ac euismod urna. Donec dui odio, ullamcorper in posuere eu, laoreet sed nisl. Sed vitae vestibulum leo. Maecenas mattis lacus eget nisl malesuada, quis semper urna ornare. Praesent id mauris nec neque aliquet dignissim.</p>
                            <p>Morbi varius dolor at lorem aliquet lacinia. Aliquam id lacinia quam. Sed vel libero felis. Etiam et pellentesque sem. Aenean bibendum, ante quis luctus tincidunt, elit mauris volutpat nisi, et tempus lectus sapien in mauris. Aliquam condimentum nisl ut elit accumsan hendrerit. Morbi mollis turpis est, id tincidunt ipsum rhoncus eget. Fusce in feugiat lacus. Quisque vel massa magna. Mauris varius congue nisl, vitae pellentesque diam ultricies at. Sed ac nibh ac diam tristique venenatis non nec nisl. Vivamus enim eros, pretium at iaculis nec, pharetra non sem. Aenean ac imperdiet odio.</p>
                            <p>Morbi varius dolor at lorem aliquet lacinia. Aliquam id lacinia quam. Sed vel libero felis. Etiam et pellentesque sem. Aenean bibendum, ante quis luctus tincidunt, elit mauris volutpat nisi, et tempus lectus sapien in mauris. Aliquam condimentum nisl ut elit accumsan hendrerit. Morbi mollis turpis est, id tincidunt ipsum rhoncus eget. Fusce in feugiat lacus. Quisque vel massa magna. Mauris varius congue nisl, vitae pellentesque diam ultricies at. Sed ac nibh ac diam tristique venenatis non nec nisl. Vivamus enim eros, pretium at iaculis nec, pharetra non sem. Aenean ac imperdiet odio.</p>
        </article>
    </main>
    <footer>
        <p>footer</p> 
    </footer>
</body>

Подробнее о том, как использовать flexbox, см. В следующих руководствах:

Pure CSS Solution 2 - Показать таблицу [Старое решение]:

Это также можно сделать с помощью свойства CSS display: table; ( см. Спецификации W3 ).

HTML: 

<div id="screen">
    <div id="header"></div>
    <div id="content">
        <div id="content_frame">
            <div id="content_wrap"></div>
        </div>
    </div>
    <div id="footer"></div>
</div>

CSS: 

html, body, #screen, #content, #content_frame {
    height: 100%; /* Make #screen viewport height and #content fill space */
}
#screen {
    display: table;
}
#header, #content, #footer {
    display: table-row;
}
#content_frame {
    overflow-y: auto; /* Add scrollbar */
    position: relative;
}
#content_wrap {
    position: absolute; /* Fix problem with overflow in FF */
}

Свойство overflow ненадежно для элементов таблицы css и их дочерних элементов, поэтому мне пришлось вложить содержимое. В этом случае мне пришлось дважды вложить и использовать position: absolute;, чтобы заставить его работать в Firefox. Может быть, кто-то еще может придумать более изящное решение, чтобы избежать этого «дивита».

Здесь функционирует jsfiddle .

Предупреждение: Это не работает в Opera 12! Div содержимого занимает 100% высоты родителя, что приводит к тому, что строки переполняют таблицу (как это было в Firefox).

1 голос
/ 12 сентября 2008

Если вы можете избежать прокручивания основного содержимого, вам лучше использовать метод footerStickAlt , чтобы убедиться, что нижний колонтитул остается в нижней части экрана или в нижней части содержимого (если содержимое выходит за пределы нижней части экрана).

0 голосов
/ 12 сентября 2008

Нужно ли вам менять размер центра? Если вы просто пытаетесь убедиться, что кажется, что его фон (# 8080ff) появляется между верхним и нижним колонтитулом, почему бы просто не иметь фон содержащего div # 8080ff. Фон верхнего и нижнего колонтитула переопределит это, а остальная часть фона div будет правильной.

0 голосов
/ 11 сентября 2008

Должен ли родитель оставаться на фиксированной высоте? 

<div style="position : relative; width : 200px; background-color : #e0e0ff; overflow : hidden;">
<div style="float: left; clear: left; background-color: #80ff80;">
header 
</div>
<div style="float: left; clear: left; background-color: #8080ff; overflow : auto; ">
content (how to position it?)
<BR />taller
<BR />taller
<BR />taller
<BR />taller
<BR />taller
<BR />taller
<BR />taller
<BR />taller
</div>
<div style="float: left; clear: left; background-color: #ff8080;">
footer 
<BR />taller
</div>

если высота родительского элемента фиксирована, это самый близкий из всех, что я знаю, как добраться до него от руки - все еще не совсем правильно, если эти цветовые блоки (в отличие от просто текста) действительно важны и не были просто для иллюстрации границ DIV: 

<div style="position : relative; width : 200px; height : 200px; background-color : #e0e0ff; overflow : hidden;">
<div style="float: left; clear: left; background-color: #80ff80; ">
header <BR .> taller
</div>
<div style="float: left; clear: left; background-color: #8080ff; overflow : auto; ">
content (how to position it?)<BR /> and another line
</div>
<div style="background-color: #ff8080; position : absolute; bottom : 0px; left :0; right : 0;">
footer <BR /> taller
</div>

0 голосов
/ 11 сентября 2008

Абсолютное позиционирование портит вас. Попробуйте что-то вроде этого:

HTML: 

<div id="wrapper">
 <div id="header">
  header
 </div>
 <div id="content">
  content
 </div>
 <div id="footer">
  footer
 </div>
</div>

CSS: 

#wrapper {
  width: 200px;
  height: 200px;
  overflow: visible;
  background: #e0e0ff;
}
#header {
  background: #80ff80;
}
#content {
  background: #8080ff;
}
#footer {
  background: #ff8080;
}

edit: возможно, я неправильно понял, вы хотите, чтобы все помещалось в блок 200x200px, или вы хотите, чтобы блок увеличивал свою высоту, чтобы соответствовать содержимому?

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

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

...