У меня есть сайт со следующей структурой:
<div id="header"></div>
<div id="main">
<div id="navigation"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
Навигация находится слева, а раздел содержимого - справа. Информация для div содержимого загружается через PHP, поэтому каждый раз она меняется.
Как я могу масштабировать навигацию по вертикали, чтобы ее высота совпадала с высотой содержимого содержимого независимо от того, какая страница загружена?
ПРИМЕЧАНИЕ. Этот ответ применим к старым браузерам без поддержки стандарта Flexbox. Для современного подхода см.: fooobar.com/questions/18470/...
Я предлагаю вам взглянуть на равные столбцы высоты с помощью CSS и без хаков.
В принципе, делать это с помощью CSS в браузере, совместимом с ним, не является тривиальным (но тривиальным для таблиц), поэтому найдите подходящее предварительно упакованное решение.
Кроме того, ответ зависит от того, хотите ли вы 100% высоты или равной высоты. Обычно она равна высоте. Если это 100% высота, ответ немного отличается.
Для родителей:
display: flex;
Вы должны добавить несколько префиксов, http://css-tricks.com/using-flexbox/.
Редактировать: Как заметил @Adam Garner, выровняйте элементы: stretch; не нужен Его использование также для родителей, а не детей. Если вы хотите определить растяжение детей, вы используете align-self.
.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>Это разочаровывающая проблема, которая постоянно касается дизайнеров. Фокус в том, что вам нужно установить высоту на 100% на BODY и HTML в CSS.
html,body {
height:100%;
}
Этот, казалось бы, бессмысленный код - это определить браузеру, что означает 100%. Разочарование, да, но самый простой способ.
Я считаю, что настройка двух столбцов на display: table-cell; вместо float: left; работает хорошо.
Если вы не возражаете, если вы отключите навигационный div в случае неожиданно короткого содержимого 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 */
}
Кроме того, > faux-columns.
#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();
});
Попробуйте сделать нижний предел 100%.
margin-bottom: 100%;
#main {
display: table;
}
#navigation, #content {
display: table-cell;
}
Посмотрите этот пример.
height : <percent> будет работать, только если у вас есть все родительские узлы с указанной процентной высотой с фиксированной высотой в пикселях, ems и т.д. на верхнем уровне. Таким образом, высота будет каскадом вниз к вашему элементу.
Вы можете указать 100% для html и элементов тела, как указано ранее в @Travis, чтобы высота страницы была каскадом вниз к вашим узлам.
После долгих поисков и попыток ничто не решило мою проблему, кроме
style = "height:100%;"
на детей Div
и для родителей применить это
.parent {
display: flex;
flex-direction: column;
}
Кроме того, я использую загрузчик, и это не повредило отзывчивый для меня.
Основываясь на методе, описанном в этой статье я создал неактивное динамическое решение:
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;
}
}
}
}
Добавить display: grid к родителю
Я знаю, что это было долгое время, так как вопрос был сделан, но я нашел легкое решение и подумал, что кто-то может его использовать (извините за плохой английский). Вот оно:
CSS
.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
);
});
[Ссылаясь на Dmity Less code в другом ответе] Я предполагаю, что это какой-то "псевдокод"?
Из того, что я понимаю, попробуйте использовать технику faux-columns, которая должна сделать трюк.
http://www.alistapart.com/articles/fauxcolumns/
Надеюсь, что это поможет:)
В заголовке вопроса и содержании есть противоречие. Название говорит о родительском div, но вопрос заставляет его звучать так, как будто вы хотите, чтобы два div div (навигации и контента) были одинаковой высоты.
Вы (а) хотите, чтобы как навигация, так и на контент были на 100% высотой основного, или (б) хотите, чтобы навигация и контент были одинаковой высоты?
Я предполагаю (б)... если это так, я не думаю, что вы сможете это сделать, учитывая текущую структуру страницы (по крайней мере, не с чистым CSS и без сценариев). Вам, вероятно, нужно будет сделать что-то вроде:
<main div>
<content div>
<navigation div></div>
</div>
</div>
и установите для содержимого div левый край любой ширины навигационной панели. Таким образом, содержимое контента находится справа от навигации, и вы можете установить, чтобы навигационный div был на 100% от высоты содержимого.
EDIT: я делаю это полностью в своей голове, но вам, вероятно, также нужно будет установить левое поле навигации div на отрицательное значение или установить его абсолютным слева на 0, чтобы переместить его обратно в крайнее левое. Проблема в том, что есть много способов снять это, но не все из них будут совместимы со всеми браузерами.
Этот ответ больше не идеален, так как CSS flexbox и grid были реализованы в CSS. Однако это все еще рабочее решение
На меньшем экране вы, вероятно, захотите сохранить высоту автоматически, так как col1, col2 и col3 накладываются друг на друга.
Однако после точки останова медиа-запроса вы бы хотели, чтобы столбцы отображались рядом друг с другом с одинаковой высотой для всех столбцов.
1125 пикселей - это только пример точки останова ширины окна, после которой вы хотите установить для всех столбцов одинаковую высоту.
<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>
Этот трюк работает: добавление конечного элемента в ваш раздел HTML в стиле clear: both;
<div style="clear:both;"></div>Все до этого будет включено в высоту.
предоставление position: absolute; чтобы ребенок работал в моем случае
Вы используете CSS Flexbox
.flex-container {
display: flex;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<p>A Flexible Layout must have a parent element with the <em>display</em> property set to <em>flex</em>.</p>
<p>Direct child elements(s) of the flexible container automatically becomes flexible items.</p>
</body>
</html>У меня была та же проблема, она работала на основе ответа Хакама Фостока, я создал небольшой пример, в некоторых случаях он мог бы работать без добавления display: flex; и flex-direction: column; в родительский контейнер
.row {
margin-top: 20px;
}
.col {
box-sizing: border-box;
border: solid 1px #6c757d;
padding: 10px;
}
.card {
background-color: #a0a0a0;
height: 100%;
}
Как показано выше, flexbox является самым простым. например.
#main{ display: flex; align-items:center;}
это приведет к выравниванию всех дочерних элементов с центром в родительском элементе.
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
From:
http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css
устанавливает bootstrap, но для его использования не требуется перезагрузка. Отвечая на этот старый вопрос, поскольку это сработало для меня и кажется довольно простым в реализации.
Это был тот же ответ, который я дал этому Question
Здесь старомодная демонстрация, основанная на position: absolute контейнера содержимого и position: relative родительского контейнера.
Что касается современного способа сделать это - flex box являются лучшими.
Самый простой способ сделать это - просто подделать его. A List Apart широко освещал эти годы, как в этой статье от Дэна Седерхольма с 2004 года.
Вот как я обычно это делаю:
<div id="container" class="clearfix" style="margin:0 auto;width:950px;background:white url(SOME_REPEATING_PATTERN.png) scroll repeat-y center top;">
<div id="navigation" style="float:left;width:190px;padding-right:10px;">
<!-- Navigation -->
</div>
<div id="content" style="float:left;width:750px;">
<!-- Content -->
</div>
</div>
Вы можете легко добавить заголовок к этому дизайну, обернув #container в другой div, вставив div в div как #container sibling и перемещая стили поля и ширины в родительский контейнер. Кроме того, CSS следует переместить в отдельный файл и не содержать в строках и т.д. И т.д. Наконец, класс clearfix можно найти на positioniseverything.