Макет нижнего колонтитула 100% ширина и содержание до нижнего колонтитула

Я застрял и понятия не имею, как решить. У меня есть липкий нижний колонтитул, и это отлично работает. Но я хочу, чтобы нижний колонтитул шириной 100%. По этой причине у меня есть внешний div, который выталкивает нижний колонтитул в нижнюю часть и содержимое div, которое центрировано.Макет нижнего колонтитула 100% ширина и содержание до нижнего колонтитула

Normaly Я установил цвет фона для полного внешнего div. Это означает, что заголовок, контент и нижний колонтитул имеют одинаковый цвет фона. Для каждого div можно установить собственный цвет, который переопределяет белый (оверлей).

Поскольку макет теперь имеет ширину 100%, я не могу получить содержимое div цвета фона, который нажимается до нижнего колонтитула.

Layout, outer_content is red, content is white, it should float till the bottom

Моя предыдущая история была немного сложнее. Я кратко/уточню свой вопрос. Как я могу получить верхний и нижний колонтитулы шириной 100%, а контент с центром в середине, цвет фона белый до нижнего колонтитула? Примечание: содержание может расширяться или быть менее 100% высоты.

Вот мой используемый HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Temp</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
</head> 
<body> 
<div id="outer"> 
    <div id="outer_header"> 
    <div id="header"> 
     <div id="menu_block"></div> 
     <div id="image_block"></div> 
    </div> 
    </div> 
    <div id="outer_content"> 
    <div id="content"> 
    dafdafdafda 
    </div> 
    </div> 
    <div id="clearfooter"></div> 
    <div id="outer_footer">Footer - | |- Footer </div> 
</div> 
</body> 
</html>

И мой CSS

/* mac hide\*/ 
html, body {height:100%} 
/* end hide */ 
body { 
    padding:0; 
    margin:0; 
    text-align:center; /* for ie6 and under */ 
    min-width:1024px; 
    background-color: #eee8d8; 
    color: #000000; 
} 
#outer { 
    min-height:100%; 
    min-width:1024px; 
    width:100%; /* add 2px if borders are not used */ 
    text-align:left; 
    margin:auto; 
    position:relative; 
} 

* html #outer{height:99.9%;} /*For ie as treats height as min-height anyway - also addreeses rounding bug at bottom of screen in IE*/ 
#outer_header { 
    height:280px; 
    width:100%; 
    float:left; 
    position:relative; 
    background-color:#1f4c3f; 
} 

#header { 
    height:280px; 
    width:1000px; 
    margin:auto; 
    position:relative; 
} 

#menu_block { 
    width:1000px; 
    height:90px; 
} 

#image_block { 
    width:1000px; 
    height:190px; 
    background-color:#FFFFFF; 
} 

#outer_content { 
    width:100%; 
    position:relative; 
    float:left; 
    background-color:red; 
} 

#content { 
    width:1000px; 
    height:100%; 
    position:relative; 
    margin:auto; 
    background-color:#FFFFFF; 
} 

#outer_footer { 
    width:100%; /* add 2px if borders are not used on the #outer div */ 
    clear:both; 
    height:50px; 
    background-color:#1f4c3f; 
    left:0; 
    bottom:0; 
    position: absolute; 
} 
* html #outer_footer {/*only ie gets this style*/ 
    \height:52px;/* for ie5 */ 
    he\ight:50px;/* for ie6 */ 
    margin-bottom:-1px; 
} 
div,p {margin-top:0}/*clear top margin for mozilla*/ 

#clearfooter {width:100%;height:52px;clear:both} /* to clear footer */

Ps. Я не хочу использовать только CSS, если это возможно, не яваскрипт

Edit: Что должен быть результат является

Correct layout

Как вы можете видеть, изображение один имеет 1 ряд белое (потому что тексты заканчивается там), но я хочу, чтобы содержимое заполнялось до липкого нижнего колонтитула ...

источник

2013-03-16 eL-Prova

Вы можете разместить изображение того, что вы хотите, чтобы ваша страница выглядеть, потому что я с трудом понимая, что вы хотите. – dezman

Привет, Уотсон, я добавил изображение результата. Извините, но я не могу найти правильные слова ... Надеюсь, что картина ясно показывает, где я ищу. Большинство учебников объясняют результат центра макетом с липким нижним колонтитулом, однако я хочу, чтобы контент был сосредоточен, но нижний колонтитул 100% ... С уважением –

Здесь три решения, в зависимости от поведения свистящего свитка.

JSFiddle Solution без скроллинга:

Markup:

<div id="header"></div> 
<div id="content"></div> 
<div id="footer"></div>

стилевых:

body, html { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    width: 100%; 
    overflow: hidden; 
} 
body { 
    background: red; 
} 
#header { 
    height: 160px; 
    background: #1f4c3f; 
} 
#content { 
    position: absolute; 
    background: white; 
    width: 500px; 
    top: 160px; 
    bottom: 40px; 
    left: 50%; 
    margin-left: -250px; 
} 
#footer { 
    position: absolute; 
    bottom: 0; 
    background: #1f4c3f; 
    width: 100%; 
    height: 40px; 
}

JSFiddle solution с вертикальной полосой прокрутки и колонтитула всегда видны:

Markup:

<div id="header"></div> 
<div id="content"></div> 
<div id="footer"></div>

стилевых:

body, html { 
    margin: 0; 
    padding: 0; 
    width: 100%; 
} 
body { 
    background: url('http://i.stack.imgur.com/WcYOv.png') center repeat-y; 
} 
#header { 
    height: 160px; 
    background: #1f4c3f; 
} 
#content { 
    width: 500px; 
    margin: 0 auto; 
} 
#footer { 
    position: fixed; 
    bottom: 0; 
    background: #1f4c3f; 
    width: 100%; 
    height: 40px; 
}

JSFiddle solution с вертикальной полосой прокрутки и движущемся сноске:

Markup:

<div id="wrap"> 
    <div id="header"></div> 
    <div id="content"></div> 
</div> 
<div id="footer"></div>

стилевых:

body, html { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    width: 100%; 
} 
#wrap { 
    background: url('http://i.stack.imgur.com/WcYOv.png') center repeat-y; 
    width: 100%; 
    min-height: 100%; 
} 
#header { 
    height: 160px; 
    background: #1f4c3f; 
} 
#content { 
    width: 500px; 
    margin: 0 auto; 
    padding-bottom: 40px; 
} 
#footer { 
    position: relative; 
    top: -40px; 
    background: #1f4c3f; 
    width: 100%; 
    height: 40px; 
}

источник

2013-03-16 23:00:11 NGLN

Привет, NGLN, его почти то, что я ищу. Вы находитесь в правильном направлении для контента, его заполняете до нижнего колонтитула. Однако, когда я получаю больше текста, содержание и нижний колонтитул остаются там, а не расширяются и толкаются ... Я должен ожидать, что есть решение только с CSS? –

Я использовал третий вариант. Я использовал в внешнем содержимом изображение 1px и центрировал его. –

Макет нижнего колонтитула 100% ширина и содержание до нижнего колонтитула

ответ

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