Двухколоночный жидкий макет с верхним и нижним колонтитулами

Моя HTML-страница с двумя столбцами, нижним колонтитулом и заголовком:

<div id="main">
   <div class="header"> </div>
   <div class="left"> </div>
   <div class="data"> </div>
   <div class="bottom"> </div>
</div>

В моем случае я хочу, чтобы левый DIV с автоматической шириной и DIV данных со 100% шириной. Как на этом изображении: введите описание изображения здесьКак CSS с поддержкой IE 6? Спасибо!


html css css-position fluid-layout
person amaranth    schedule 13.01.2015    source источник
comment
Можете ли вы опубликовать CSS, который у вас есть?   -  person atmd    schedule 13.01.2015
comment
Избегайте поддержки IE6 :) Это лучше для вас, вашего проекта, вашего клиента и веб-сообщества. Действительно   -  person Michał Kutra    schedule 13.01.2015
comment
Что-то jsfiddle.net/z8hbgena/1, но у DIV есть другие имена   -  person amaranth    schedule 13.01.2015

Ответы (2)


arrow_upward
1
arrow_downward

Демо

html

<div class="header">
    header content
</div>

<div class="content">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

<div class="footer">
    footer content
</div>

css

body, html{
    padding:0;
    margin:0;
    position:relative;
    height:100%
}
.header, .footer{
    width:100%;
    background:#ccc;
    padding:10px;
    box-sizing:border-box;
}
.content{
    background:#eee;
    width:100%;
    padding:10px;
    height:100%;
    box-sizing:border-box;
    padding:10px;
}
.left{
    width:50%;
    float:left;
    background:#bbb;
    height:100%;
}
.right{
    width:50%;
    float:right;
    background:#aaa;
    height:100%;
}

при необходимости ДЕМО

css

сохраняя все то же, что и выше, просто измените ниже css

.content{
    background:#eee;
    width:100%;
    padding:10px;
    height:100%;
    box-sizing:border-box;
    padding:10px;
    display:table
}
.left{
    width:auto;
    background:#bbb;
    height:100%;
    display:table-cell
}
.right{
    background:#aaa;
    height:100%;
    display:table-cell;
    width:100%
}
person 4dgaurav    schedule 13.01.2015
comment
Могу ли я установить автоматическую ширину левого DIV и 100% правую ширину DIV? - person amaranth; 13.01.2015
comment
да .. некоторые правки в коде сделают это, но тогда я не уверен в совместимости с ie6. Или вы можете задать ширину, например, 30% слева и 70% справа ... или что-то в этом роде, если это соответствует вашей цели. - person 4dgaurav; 13.01.2015
comment
jsfiddle.net/s37z0pfu/5 - не работает для левой ширины DIV автоматически и правой ширины DIV 100% - person amaranth; 13.01.2015
comment
не так .. вам нужно немного изменить код .. позвольте мне сделать это для вас .. подождите несколько минут .. занят чем-то другим .. - person 4dgaurav; 13.01.2015
comment
вам нужно поместить некоторый контент в левый div, так как он имеет width: auto ;. поэтому, если содержимого нет, ширина будет равна 0. проверить это jsfiddle.net/4dgaurav/s37z0pfu/8 - person 4dgaurav; 13.01.2015
comment
Я помещаю текст слева DIV jsfiddle.net/s37z0pfu/10, но не вижу календарь Pikday - person amaranth; 13.01.2015

arrow_upward
0
arrow_downward

Думаю, это сработает. Пожалуйста, проверьте и дайте мне знать.

.container {
    width: 500px;
    max-height: 500px;
    margin: 10px;
    border: 1px solid #fff;
    background-color: #ffffff;
    box-shadow: 0px 2px 7px #292929;
    -moz-box-shadow: 0px 2px 7px #292929;
    -webkit-box-shadow: 0px 2px 7px #292929;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}
.mainbody,
.header,
.footer {
    padding: 5px;
}
.mainbody {
    margin-top: 0;
    min-height: 150px;
    max-height: 388px;
    overflow: auto;
}
.header {
    height: 40px;
    border-bottom: 1px solid #EEE;
    background-color: #ffffff;
    height: 40px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.footer {
    height: 40px;
    background-color: whiteSmoke;
    border-top: 1px solid #DDD;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.left{
width:50%;
float:left;
background:#bbb;
height:100%;
}
.right{
    width:50%;
    float:right;
    background:#aaa;
    height:100%;
}

<div id="container">
    <div class="header">Header</div>
    <div class="mainbody">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <div class="footer">Footer</div>
</div>
person Shivam    schedule 13.01.2015