3 расположение столбца с верхним и нижним колонтитулом в центральной колонке

58
8

Я пытаюсь сделать мою страницу похожей на приложение Android для Android. Приложение можно суммировать как имеющее 3-х столбчатую компоновку с только центральным столбцом, имеющим заголовок (нет нижнего колонтитула, но по моему требованию мне также нужен нижний колонтитул).

Это может быть показано на изображении ниже

enter image description here

Красный и синий div - левая и правая боковые панели. Зеленый и фиолетовый div - это центр div. Фиолетовый div - это верхний и нижний колонтитулы и будут прилипать к верхней и нижней части страницы соответственно.

Еще одно требование - кнопки на заголовке (верхнем фиолетовом), чтобы скрыть и показать левую и правую боковые панели. Первоначально только центральный div будет виден, а остальное можно вызвать в поле зрения по мере необходимости. Вот мой код до сих пор. (Я не могу получить ширину для центра div)

Код HTML

<html>
<head>
<title>Sample</title>
<link rel="stylesheet" href="index.css" type="text/css" />
</head>
<body>
<div id="main">
<div id="leftBar" class="main">Left Bar</div>
<div id="content" class="inner">
<div id="header">Head</div>
<div id="body">Body</div>
<div id="footer">Footer</div>
</div>
<div id="rightBar" class="main">Right Bar</div>
</div>
</body>
</html>

CSS

body{
margin: 0px;
}

div.inner{
height: 500px;
width: 50%;
background: red;
}

div.main{
background: lime;
height: 200px;
overflow: hidden;
position: relative;
}

#leftBar{
float: left;
}

#content{
position: relative;
height: 100%;
float: left;
}

#rightBar{
float: right;
}

#header{
position: fixed;
top: 0px;
background: blue;
}

#body{
margin-top: 40px;
position: relative;
}

#footer{
position: absolute;
bottom: 0px;
}

Я также добавил код JavaScript в скрипте, приведенной ниже: http://jsfiddle.net/mv6Bj/1/

Ширина должна быть такой, чтобы центр div был заполнен на 100% шириной экрана, и когда правые/левые переключатели попадают в изображение, они должны прийти в их положение и нажимать центральный div влево или вправо соответственно. Это соответствует стандартным функциям приложения Facebook.

Это проблемы, которые я получаю прямо сейчас

Центр div не 100%, и он не масштабируется по мере появления и исчезновения элементов Высота центрального div не 100% (это на Chrome, но странно это не на JSFiddle) Когда я нажимаю налево, левая панель исчезает, а содержимое div перемещается влево, но заголовок div остается там, где он есть.

спросил(а) 2013-12-26T11:38:00+04:00 6 лет, 9 месяцев назад
1
Решение
71

По моему пониманию, я обновил скрипку.

Рабочая демонстрация

Я использовал display:table propery. Вы можете ссылаться на это или это

html, body {
margin: 0px;
min-height:100%;
height:100%;
}

#main {
min-height:100%;
display:table;
width:100%;
height:100%;
}

#leftBar, #rightBar {
background: lime;
width:100px;
display:table-cell;
}

#content {
min-height: 100%;
display:table-cell;
background: red;
}

#header {
background: blue;
height:10%;
}
#body {
min-height:80%;
overflow:hidden;
}
#footer {
background: magenta;
height:10%;
}

Надеюсь, что это работает для вас.

ответил(а) 2013-12-26T12:05:00+04:00 6 лет, 9 месяцев назад
41

вы можете проверить эту скрипку, я сделал некоторые изменения в вашем CSS.

body {
margin: 0px;
}
div.inner {
height: 500px;
width: 50%;
background: red;
}
div.main {
background: lime;
bottom:0px;
top:0px;
overflow: hidden;
position: absolute;
width:20%;

}
#leftBar {
float: left;
}
#content {
position: absolute;
height: 100%;
top:0px;
right:0px;
width:60%;
left:20%;
float:left;

}
#rightBar {
float: right;
width:20%;
background: lime;
top:0px;
bottom:0px;
left:80%;
position:absolute;
}
#header {
float: left;
position: fixed;
top: 0px;
margin-left: 0px;
background: blue;
left:20%;
right:20%;
}
#body {
margin-top: 40px;
position: relative;
}
#footer {
position: absolute;
bottom: 0px;
position: fixed;

margin-left: 0px;
background: blue;
left:20%;
right:20%;
}

http://jsfiddle.net/mv6Bj/3/

ответил(а) 2013-12-26T12:17:00+04:00 6 лет, 9 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема