У меня есть сайт со следующей структурой:
<div id="header"></div>
<div id="main">
<div id="navigation"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
Навигация находится слева, а содержимое div - справа. Информация для content div подтягивается через PHP, поэтому она каждый раз разная.
Как я могу масштабировать навигацию по вертикали, чтобы ее высота совпадала с высотой div содержимого, независимо от того, какая страница загружена?
Для родителей:
display: flex;
Вы должны добавить некоторые префиксы, http://css-tricks.com/using-flexbox/.
Редактировать: Как @Адам Гарнер отметил, выравнивание-детали: эластичная; не требуется. Его использование также и для родителей, а не детей. Если вы хотите определить детей, растяжка, вы используете выровнять самостоятельно.
в
.parent {
background: red;
padding: 10px;
display:flex;
}
.other-child {
width: 100px;
background: yellow;
height: 150px;
padding: .5rem;
}
.child {
width: 100px;
background: blue;
}
<div class="parent">
<div class="other-child">
Only used for stretching the parent
</div>
<div class="child"></div>
</div>
в
ПРИМЕЧАНИЕ: Этот ответ применим к устаревшим браузерам без поддержки стандарта Flexbox. Современный подход см. на сайте: https://stackoverflow.com/a/23300532/1155721
Я предлагаю вам взглянуть на статью Колонки одинаковой высоты с кроссбраузерным CSS и без хаков.
В принципе, сделать это с помощью CSS совместимым с браузером способом не тривиально (но тривиально с таблицами), поэтому найдите себе подходящее готовое решение.
Кроме того, ответ зависит от того, хотите ли вы 100% высоты или равной высоты. Обычно это равная высота. Если нужна 100% высота, то ответ будет немного другим.
Это расстраивает проблема, что'ы разобрались с дизайнерами все время. Хитрость заключается в том, что вам нужно задать высоту в 100% на тело и HTML-код в ваш CSS.
html,body {
height:100%;
}
Этот, казалось бы, бессмысленного кода, чтобы определить браузеру, что 100% средство. Неприятно, да, но это самый простой способ.
Я считаю, что установка двух столбцов дисплей: стол-клеток;
вместо поплавок: слева;
хорошо работает.
Если вы не против того, чтобы навигационный div обрезался в случае неожиданно короткого content div, есть по крайней мере один простой способ:
#main {
position: relative;
}
#main #navigation {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 10em; /* or whatever */
}
#main #content {
margin: 0;
margin-left: 10em; /* or whatever width you set for #navigation */
}
В противном случае есть фальшивых колонок.
#main {
overflow: hidden;
}
#navigation, #content {
margin-bottom: -1000px;
padding-bottom: 1000px;
}
с помощью jQuery:
$(function() {
function unifyHeights() {
var maxHeight = 0;
$('#container').children('#navigation, #content').each(function() {
var height = $(this).outerHeight();
// alert(height);
if ( height > maxHeight ) {
maxHeight = height;
}
});
$('#navigation, #content').css('height', maxHeight);
}
unifyHeights();
});
После долгих поисков и попробовать, ничего не решали мою проблему, за исключением
style = "height:100%;"
на детей див
и для родителей применить это
.parent {
display: flex;
flex-direction: column;
}
кроме того, я использую Bootstrap и это не коррумпированных реагировать на меня.
высота : <процентов>` будет работать только если у вас все родительские узлы с указанной высоты с фиксированной высотой в пикселях, EMS, и т. д. на верхний уровень. Таким образом, высота будет каскадом вниз на свой элемент.
Можно указать 100% для HTML и элементы тела как @Трэвис заявил ранее, чтобы высота страницы, сбегающие вниз на свои узлы.
На основе метода, описанного в настоящей статье я создал .Менее динамичное решение:
HTML-код:
в
<div id="container3">
<div id="container2">
<div id="container1">
<div id="col1">Column 1</div>
<div id="col2">Column 2</div>
<div id="col3">Column 3</div>
</div>
</div>
</div>
Менее
/* Changes these variables to adjust your columns */
@col1Width: 60%;
@col2Width: 1%;
@padding: 0%;
/* Misc variable. Do not change */
@col3Width: 100% - @col1Width - @col2Width;
#container3 {
float: left;
width: 100%;
overflow: hidden;
background-color: red;
position: relative;
#container2 {
float: left;
width: 100%;
position: relative;
background-color: yellow;
right: @col3Width;
#container1 {
float: left;
width: 100%;
position: relative;
right: @col2Width;
background-color: green;
#col1 {
float: left;
width: @col1Width - @padding * 2;
position: relative;
left: 100% - @col1Width + @padding;
overflow: hidden;
}
.col2 {
float: left;
width: @col2Width - @padding * 2;
position: relative;
left: 100% - @col1Width + @padding + @padding * 2;
overflow: hidden;
}
#col3 {
float: left;
width: @col3Width - @padding * 2;
position: relative;
left: 100% - @col1Width + @padding + @padding * 4;
overflow: hidden;
}
}
}
}
Я знаю, что это'ы было столько времени, поскольку этот вопрос был сделан, но я нашел простое решение, и думал, что кто-то может использовать его (извините за плохой английский). Вот он идет:
УСБ
.main, .sidebar {
float: none;
padding: 20px;
vertical-align: top;
}
.container {
display: table;
}
.main {
width: 400px;
background-color: LightSlateGrey;
display: table-cell;
}
.sidebar {
width: 200px;
display: table-cell;
background-color: Tomato;
}
HTML-код
<div class="container clearfix">
<div class="sidebar">
simple text here
</div>
<div class="main">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis. Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit, lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non, dictum vitae mi. Donec sed bibendum ante.
</div>
</div>
Простой пример. Обратите внимание, что вы можете превратиться в отзывчивости.
Мое решение:
$(window).resize(function() {
$('#div_to_occupy_the_rest').height(
$(window).height() - $('#div_to_occupy_the_rest').offset().top
);
});
Этот ответ не подходит, т. к. в CSS элемента и сетки, где реализована в CSS. Однако он до сих пор рабочий раствор
На небольшом экране вы, вероятно, хотите сохранить высоту авто как на col1, col2 и col3 укладывают одна на другую.
Однако после останова СМИ запроса, который вы хотели бы седла, чтобы появиться рядом друг с другом с одинаковой высоты для всех столбцов.
1125 px-это только пример ширина окна точки останова, после которого вы хотите сделать все столбцы установить на ту же высоту.
<div class="wraper">
<div class="col1">Lorem ipsum dolor sit amet.</div>
<div class="col2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos laudantium, possimus sed, debitis amet in, explicabo dolor similique eligendi officia numquam eaque quae illo magnam distinctio odio, esse vero aspernatur.</div>
<div class="col3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, odio qui praesentium.</div>
</div>
Можно, конечно, установить несколько точек останова, если вам нужно.
<script>
$(document).ready(function(){
$(window).on('load resize', function() {
let vraperH = $('.wraper').height();
if (window.innerWidth>= 1125) {
$('.col1').height(vraperH);
$('.col2').height(vraperH);
$('.col3').height(vraperH);
}
if (window.innerWidth < 1125) {
$('.col1').height('auto');
$('.col2').height('auto');
$('.col3').height('auto');
}
});
});
</script>
Есть немного противоречия в вопросе's название и содержание. Название говорит родительского div, но вопрос звучит, как вы хотите два брата ДИВС (навигация и контент) должны быть одинаковой высоты.
Ты (а) хочешь, как навигация и контент должен быть 100% высоты основного, или (B) хочу навигацию и контент, чтобы быть такой же высоты?
Я'МР предположить (Б)...если это так, я не'т думаю, что вы сможете сделать это с учетом текущей структуры страницы (по крайней мере, не на чистом CSS и никаких скриптов). Вы, вероятно, нужно сделать что-то вроде:
<main div>
<content div>
<navigation div></div>
</div>
</div>
и установить содержимое div, чтобы иметь левое поле независимо от ширины панели навигации. Таким образом, содержание'содержание s-это справа от навигации, и вы можете установить навигацию div, чтобы быть на 100% контент'с высоты.
Редактировать: я'м делаешь это полностью в голове, но вы, вероятно, также нужно установить навигацию див'с левой отрицательное значение или установить его'с абсолютной осталось 0 засунуть его обратно в крайнее левое положение. Проблема, существует множество способов все это провернуть, но не все из них собираются, чтобы быть совместимым со всеми браузерами.
У меня была такая же проблема, он действовал на основании Хакама Fostok'ы ответ, Я'вэ создал небольшой пример, в некоторых случаях может работать без того, чтобы добавить отобразить: гибкий;
и `флекс-направление: колонка;
о родительском контейнере
<БР/>
.row {
margin-top: 20px;
}
.col {
box-sizing: border-box;
border: solid 1px #6c757d;
padding: 10px;
}
.card {
background-color: #a0a0a0;
height: 100%;
}
в <а href="и
">JSFiddle</а>этот трюк работает: при добавлении последнего элемента в раздел HTML стиль ясного:оба;
<div стиль="и ясное:оба; и"></див>
все до того, что будет включено в высоту.
[ссылка на Dmity's Less code в другом ответе] Я'предполагаю, что это своего рода "псевдокод"?
Насколько я понимаю, попробуйте использовать технику faux-columns, это должно помочь.
http://www.alistapart.com/articles/fauxcolumns/
Надеюсь, это поможет :)