#html #вёрстка #responsive
*Левая панель с фиксированной шириной, высота - на всю высоту страницы, между шапкой
и футером.
*Средний блок без фиксированной ширины и высоты, резиновый.
*Правый блок фиксированный по высоте и ширине.
*Header имеет position:fixed;
*Footer должен быть прижат к низу экрана, а основной блок растянут на всю высоту.
Проблема с центральным блоком, если ему не задать ширину, то получается как-то так:
код:
/*CSS Base =================================*/
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, ol, ul, li, form {margin:0;
padding:0; border:0; font-size:100%; vertical-align:baseline;}
body {color:#111; font-family: "Tahoma", sans-serif;}
input, textarea {outline:none;}
h1 {font-size:36px; font-weight: normal;}
h2 {font-size:28px; font-weight: normal;}
p {font-size:18px; line-height:20px; }
a {outline:none; text-decoration:none;}
a:hover {text-decoration: none;}
img {border:none; outline:0;}
.clearfix:before,
.clearfix:after {
content: "";
display: block;
visibility: hidden;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
/* HEADER */
header {
width: 100%;
height: 80px;
background: #ECECEC;
position: fixed;
top: 0;
right: 0;
z-index: 10;
}
/* MAIN CONTENT */
#container {
position: relative;
width: 100%;
height: 100%;
margin-top: 80px;
}
#container .left-panel {
width: 400px;
height: 100%;
background: #CACACA;
float: left;
}
#container .content {
width: 100%;
position: relative;
float: right;
}
#container .content .right-panel {
float: right;
width: 200px;
height: 400px;
background: #CACACA;
}
/* FOOTER */
footer {
height: 100px;
width: 100%;
background: #ECECEC;
}
HEADER
left-panel
right-panel
main content
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati illum
ullam incidunt ducimus! Iusto ullam maxime aperiam laboriosam cupiditate nesciunt magnam
dolores quas maiores accusamus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati illum
ullam incidunt ducimus! Iusto ullam maxime aperiam laboriosam cupiditate nesciunt magnam
dolores quas maiores accusamus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati illum
ullam incidunt ducimus! Iusto ullam maxime aperiam laboriosam cupiditate nesciunt magnam
dolores quas maiores accusamus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati illum
ullam incidunt ducimus! Iusto ullam maxime aperiam laboriosam cupiditate nesciunt magnam
dolores quas maiores accusamus.
Еще попробовал вот так:
/* MAIN CONTENT */
#container {
width: 100%;
height: 100%;
margin-top: 80px;
min-width: 980px;
display: table;
}
#container .left-panel {
width: 400px;
height: 100%;
background: #CACACA;
display: table-cell;
}
#container .content {
display: table-cell;
}
#container .content .right-panel {
float: right;
width: 200px;
height: 200px;
background: #CACACA;
}
результат
Почти то, что надо, но теперь главный #container не растягивается на всю высоту страницы.
Ответы
Ответ 1
Первое, что я заметил: У вас у .left-column стоит height: 100% Данное свойство не будет работать, если у его родителя не будет задана какая-то определенная высота(такое ограничение). Хорошо, смотрим на родителя... Для section#container у вас тоже задана высота height: 100%. Что не так? А section#container в свою очередь тоже смотрит на своего родителя, а в родителях у него html и body, а вот для них у вас не стоит высота 100%, поэтому вся конструкция не растянется на всю высоту. Поэтому задайте: html, body{ height: 100%; } Второе: Вы используете свойство #container .content { float: right; } Для основного контейнера, которое определяет высоту всего документа оно не нужно, поэтому уберите его, и задайте margin-left: ширина левого блока И еще: Исключите идентификаторы (#) из css правил, пользуйтесь только классами. /*CSS Base =================================*/ html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, ol, ul, li, form {margin:0; padding:0; border:0; font-size:100%; vertical-align:baseline;} html, body{height: 100%} body {color:#111; font-family: "Tahoma", sans-serif;} input, textarea {outline:none;} h1 {font-size:36px; font-weight: normal;} h2 {font-size:28px; font-weight: normal;} p {font-size:18px; line-height:20px; } a {outline:none; text-decoration:none;} a:hover {text-decoration: none;} img {border:none; outline:0;} .clearfix:before, .clearfix:after { content: ""; display: block; visibility: hidden; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } /* HEADER */ header { width: 100%; height: 80px; background: #ECECEC; position: fixed; top: 0; right: 0; z-index: 10; } /* MAIN CONTENT */ #container { position: relative; width: 100%; height: 100%; margin-top: 80px; } #container .left-panel { width: 400px; height: 100%; background: #CACACA; float: left; } #container .content { width: 100%; position: relative; margin-left: 400px; } #container .content .right-panel { float: right; width: 200px; height: 400px; background: #CACACA; } /* FOOTER */ footer { height: 100px; width: 100%; background: #ECECEC; }HEADER
left-panel
right-panel
main content
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati illum ullam incidunt ducimus! Iusto ullam maxime aperiam laboriosam cupiditate nesciunt magnam dolores quas maiores accusamus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati illum ullam incidunt ducimus! Iusto ullam maxime aperiam laboriosam cupiditate nesciunt magnam dolores quas maiores accusamus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati illum ullam incidunt ducimus! Iusto ullam maxime aperiam laboriosam cupiditate nesciunt magnam dolores quas maiores accusamus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati illum ullam incidunt ducimus! Iusto ullam maxime aperiam laboriosam cupiditate nesciunt magnam dolores quas maiores accusamus.
Ответ 2
Как вариант: html, body, header, footer, h1, h2, h3, h4, div, p { margin: 0; padding: 0; } body { height: 100%; } header { background: #004d80; text-align: center; color: white; height: 100px; width: 100%; top: 0; left: 0; position: fixed; } footer { height: 120px; background: #004d80; margin-top: -120px; color: white; text-align: center; } .container { min-height: 100%; } .left-panel { width: 200px; background: #669999; color: white; text-align: center; display: table-cell; } .main_content { display: table; height: 100%; } .content { margin-top: 100px; margin-left: 200px; padding-bottom: 120px; display: table-cell; padding-left: 15px; padding-bottom: 120px; } .right-panel { background: #5c8a8a; text-align: center; color: white; float: right; width: 200px; height: 150px; } .left-panel_block { margin-top: 100px; background: #5c8a8a; }HEADER
left-panel
right-panel
main content
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati illum ullam incidunt ducimus! Iusto ullam maxime aperiam laboriosam cupiditate nesciunt magnam dolores quas maiores accusamus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati illum ullam incidunt ducimus! Iusto ullam maxime aperiam laboriosam cupiditate nesciunt magnam dolores quas maiores accusamus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati illum ullam incidunt ducimus! Iusto ullam maxime aperiam laboriosam cupiditate nesciunt magnam dolores quas maiores accusamus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati illum ullam incidunt ducimus! Iusto ullam maxime aperiam laboriosam cupiditate nesciunt magnam dolores quas maiores accusamus.
Комментариев нет:
Отправить комментарий