Две колонны дивы внутри сОн контейнера

Я хотел бы установить 2-колонки диву с одной и той же высотой, чем контейнер (без использования точек конечно)Две колонны дивы внутри сОн контейнера

HTML

<body> 
<div id="container"> 
    <div id="hdr-lay"> 
    Header 
    </div> 

    <div id="left-column"> 
    Grid Layout left 
    </div> 

    <div id="right-column"> 
    Grid Layout right 
    </div> 
</div> 
</body>

CSS

#hdr-lay { 
    _background-color: red; 
} 

#container { 
    background-color: gray; 
    height:100%; 
    width:100%; 
} 

#left-column { 
    float: left; 
    background-color: red; 
    border: 1px; 
    width: 70%; 
} 

#right-column { 
    float: left; 
    width: 30%; 
    background-color: blue; 
    display: block; 
}

http://jsfiddle.net/g3gxv4j2/

Возможно, было бы проще сделать это с помощью нет?

источник

2015-01-28 Stef

Вы сталкиваетесь с проблемой, когда вы просматриваете это на небольшом разрешении ..? – Sachin

Я хотел бы установить 2-колонки диву с одной и той же высотой, чем контейнера

Поскольку ваш контейнер имеет height:100%, я предполагаю, что вы хотите, то же самое для вашего ребенка сНу-х

Дайте высоту 100% вашему html и корпусу
```
html,body{ 
height:100% 
} 
```
Вы установили height:100% для своего контейнера. Это только увеличит его высоту до 100% его содержимого (которые сами не получают 100% высоты). Пусть ваши левый и правый столбцы наследуют высоту из своего родительского контейнера.
```
#right-column { 
float: left; 
width: 30%; 
background-color: blue; 
display: block; 
height:inherit; 
} 

#left-column { 
float: left; 
background-color: red; 
border: 1px; 
width: 70%; 
height:inherit; 
} 
```

Вот что fiddle

Ура!

источник

2015-01-28 13:02:07 nalinc

Да, это то, что мне нужно ... Но что странно, так это то, что весь результат не «внутри» окна браузера!? Я думаю, из-за раздела «заголовок»? – Stef

Точно! Thats, потому что ваши левые и правые «divs» получают 100% -ный рост своего «контейнера», но «заголовок» уже занимает часть его. – nalinc

. Хорошо, я думаю, что моя ошибка в том, что div является «настоящим» контейнером для его дочерний объект ... Я имею в виду, в отличие от обычного графического интерфейса, нет обрезания, управления переполнением (кроме переполнения) – Stef

Две колонны дивы внутри сОн контейнера

ответ

Смежные вопросы