100% ширина липкий нижний колонтитул + заголовок, но центрированный 3 столбца с высотой 100%?

Я пытаюсь создать веб-дизайн с фиксированным меню с полной шириной, полным заголовком ширины, широким центрированным контентом 960px с 3 колонками (каждый с высотой 100%) и липким нижним колонтитулом полной ширины.100% ширина липкий нижний колонтитул + заголовок, но центрированный 3 столбца с высотой 100%?

Во всех рабочих примерах я видел, что заголовок, содержание и нижний колонтитул имеют одинаковую ширину.

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

Я привел пример того, что я пытаюсь достичь: http://muku.dk/example.jpg

Возможно ли это с помощью CSS?

источник

2012-02-02 Cody

Чтобы ответить на ваш вопрос «Возможно ли это с помощью CSS?». Да, очень возможно с CSS – Jawad

Нечто подобное. Обратите внимание, что это только для того, чтобы направлять вас в правильном направлении. Вы должны вставлять в себя столбцы одинаковой высоты, используя любую технику, а также липкий нижний колонтитул.

Разметка

<!Doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Title Goes Here</title> 
<link rel="stylesheet" href="styles.css"> 
</head> 
<body> 
<div id="wrapper"> 
<div id="my_menu"> 
<p>fixed menu width 100%</p> 
</div> 
<div id="container"> 
<div id="my_header"> 
<p>header width 100%</p> 
</div> 
<div id="content"> 
<div id="col1"> 
<p>column 1 width 320px height 100%</p> 
</div> 
<div id="col2"> 
<p>column 2 width 320px height 100%</p> 
</div> 
<div id="col3"> 
<p>column 3 width 320px height 100%</p> 
</div> 
</div> 
<div id="my_footer"> 
<p>sticky footer width 100%</p> 
</div> 
</div> 
</div> 
</body> 
</html>

Стиль

* 
{ 
padding: 0; 
margin: 0; 
} 

html, body 
{ 
width: 100%; 
min-width: 100%; 
height: 100%; 
min-height: 100%; 
} 

div#wrapper 
{ 
width: 100%; 
min-width: 100%; 
height: 100%; 
min-height: 100%; 
} 

div#my_menu 
{ 
width: 100%; 
min-width: 100%; 
height: 50px; 
border: 1px solid black; 
background-color: grey; 
position: fixed; 
} 

div#my_menu>p 
{ 
width: 100%; 
min-width: 100%; 
height: 100%; 
min-height: 100%; 
font-size: 50px; 
line-height: 50px; 
font-weight: bold; 
text-transform: uppercase; 
color: red; 
text-align: center; 
} 

div#container 
{ 
width: 100%; 
min-width: 100%; 
height: 100%; 
min-height: 100%; 
padding-top: 50px; 
} 

div#my_header 
{ 
width: 100%; 
min-width: 100%; 
height: 100px; 
border: 1px solid black; 
background-color: yellow; 
} 

div#my_header>p 
{ 
width: 100%; 
min-width: 100%; 
height: 100%; 
min-height: 100%; 
font-size: 100px; 
line-height: 100px; 
font-weight: bold; 
text-transform: uppercase; 
color: red; 
text-align: center; 
} 

div#content 
{ 
width: 960px; 
margin: 0 auto; 
height: 100%; 
min-height: 100%; 
border: 1px solid black; 
background-color: blue; 
overflow: auto; 
} 

div#col1 
{ 
width: 320px; 
height: 100%; 
min-height: 100%; 
outline: 1px solid black; 
background-color: green; 
float: left; 
} 

div#col1>p 
{ 
width: 100%; 
min-width: 100%; 
font-weight: bold; 
text-transform: uppercase; 
color: red; 
text-align: center; 
} 

div#col2 
{ 
width: 320px; 
height: 100%; 
min-height: 100%; 
outline: 1px solid black; 
background-color: orange; 
float: left; 
} 

div#col2>p 
{ 
width: 100%; 
min-width: 100%; 
font-weight: bold; 
text-transform: uppercase; 
color: red; 
text-align: center; 
} 

div#col3 
{ 
width: 320px; 
height: 100%; 
min-height: 100%; 
outline: 1px solid black; 
background-color: gold; 
float: left; 
} 

div#col3>p 
{ 
width: 100%; 
min-width: 100%; 
font-weight: bold; 
text-transform: uppercase; 
color: red; 
text-align: center; 
} 

div#my_footer 
{ 
width: 100%; 
min-width: 100%; 
height: 80px; 
border: 1px solid black; 
background-color: pink; 
} 

div#my_footer>p 
{ 
width: 100%; 
min-width: 100%; 
height: 100%; 
min-height: 100%; 
font-size: 80px; 
line-height: 80px; 
font-weight: bold; 
text-transform: uppercase; 
color: red; 
text-align: center; 
}

EDIT 1

Попробуйте это. Это работает отлично. Нижний колонтитул укладывается в нижнюю часть, даже когда содержимого недостаточно, и нажата вниз, когда есть больше контента. Также вертикальный Scroolbar не отображается. Теперь, пожалуйста, не просите меня сделать столбцы равной высоте.

HTML-разметка

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Document Title</title> 
<link rel="stylesheet" href="main.css" type="text/css" /> 
</head> 
<body id="index"> 
<div id="wrapper"> 
    <div id="my_menu"> 
    FIXED MENU WIDTH 100% 
    </div> 
    <div id="my_header"> 
    HEADER WIDTH 100% 
    </div> 
    <div id="content"> 
     <p>CONTENT 960px</p> 
     <div id="col1" class="content_columns"> 
     COLUMN 1 WIDTH 320px HEIGHT 100% 
     COLUMN 1 WIDTH 320px HEIGHT 100% 
     COLUMN 1 WIDTH 320px HEIGHT 100% 
     COLUMN 1 WIDTH 320px HEIGHT 100% 
     COLUMN 1 WIDTH 320px HEIGHT 100% 
     COLUMN 1 WIDTH 320px HEIGHT 100% 
     COLUMN 1 WIDTH 320px HEIGHT 100% 
     COLUMN 1 WIDTH 320px HEIGHT 100% 
     COLUMN 1 WIDTH 320px HEIGHT 100% 
     COLUMN 1 WIDTH 320px HEIGHT 100% 
     COLUMN 1 WIDTH 320px HEIGHT 100% 
     COLUMN 1 WIDTH 320px HEIGHT 100% 
     COLUMN 1 WIDTH 320px HEIGHT 100% 
     COLUMN 1 WIDTH 320px HEIGHT 100% 
     COLUMN 1 WIDTH 320px HEIGHT 100% 
     COLUMN 1 WIDTH 320px HEIGHT 100% 
     COLUMN 1 WIDTH 320px HEIGHT 100% 
     COLUMN 1 WIDTH 320px HEIGHT 100% 
     COLUMN 1 WIDTH 320px HEIGHT 100% 
     COLUMN 1 WIDTH 320px HEIGHT 100% 
     COLUMN 1 WIDTH 320px HEIGHT 100% 
     COLUMN 1 WIDTH 320px HEIGHT 100% 
     COLUMN 1 WIDTH 320px HEIGHT 100% 
     COLUMN 1 WIDTH 320px HEIGHT 100% 
     COLUMN 1 WIDTH 320px HEIGHT 100% 
     COLUMN 1 WIDTH 320px HEIGHT 100% 
     COLUMN 1 WIDTH 320px HEIGHT 100% 
     </div> 
     <div id="col2" class="content_columns"> 
     COLUMN 2 WIDTH 320px HEIGHT 100% 
     COLUMN 2 WIDTH 320px HEIGHT 100% 
     COLUMN 2 WIDTH 320px HEIGHT 100% 
     COLUMN 2 WIDTH 320px HEIGHT 100% 
     COLUMN 2 WIDTH 320px HEIGHT 100% 
     COLUMN 2 WIDTH 320px HEIGHT 100% 
     COLUMN 2 WIDTH 320px HEIGHT 100% 
     COLUMN 2 WIDTH 320px HEIGHT 100% 
     COLUMN 2 WIDTH 320px HEIGHT 100% 
     </div> 
     <div id="col3" class="content_columns"> 
     COLUMN 3 WIDTH 320px HEIGHT 100% 
     COLUMN 3 WIDTH 320px HEIGHT 100% 
     COLUMN 3 WIDTH 320px HEIGHT 100% 
     COLUMN 3 WIDTH 320px HEIGHT 100% 
     COLUMN 3 WIDTH 320px HEIGHT 100% 
     </div> 
     <div class="clear_floats"></div> <!-- For Clearing Floats --> 
    </div> 
    <div class="push"></div> <!-- For Sticky Footer --> 
</div> 
    <div id="my_footer"> 
    STICKY FOOTER WIDTH 100% 
    </div> 
</body> 
</html>

Стиль CSS

* /* For CSS Reset */ 
{ 
padding: 0; 
margin: 0; 
} 

html, body 
{ 
width: 100%; 
height: 100%; 
} 

div#wrapper 
{ 
width: 100%; 
height: 100%; 
min-height: 100%; /* For Sticky Footer */ 
height: auto !important; /* For Sticky Footer */ 
margin: 0 auto -70px; /* For Sticky Footer */ 
} 

div#my_menu 
{ 
width: 100%; 
height: 50px; 
outline: 1px solid black; 
background-color: grey; 
text-align: center; 
position: fixed; 
} 

div#my_header 
{ 
width: 100%; 
height: 100px; 
outline: 1px solid black; 
background-color: yellow; 
text-align: center; 
padding-top: 50px; 
} 

div#content 
{ 
width: 960px; 
margin: 0 auto; 
outline: 1px solid black; 
background-color: brown; 
text-align: center; 
} 

div.content_columns 
{ 
width: 320px; 
outline: 1px solid black; 
background-color: gold; 
text-align: center; 
float: left; 
} 

div.clear_floats /* For Clearing Floats */ 
{ 
clear: both; 
} 

div#my_footer 
{ 
width: 100%; 
height: 70px; 
outline: 1px solid black; 
background-color: pink; 
text-align: center; 
} 

div.push /* For Sticky Footer */ 
{ 
height: 70px; 
}

Надеется, что это помогает.

источник

2012-02-03 21:17:42 Jawad

Большое вам спасибо за ваше время! Но с вашим решением я по-прежнему получаю ненужный прокрутки, хотя содержимое внутри столбца меньше высоты экрана. Можно ли это избежать? – Cody

@ Kasper Bjerre: Смотрите мое редактирование. – Jawad

Спасибо большое, я очень ценю ваши усилия! Но при большом разрешении экрана контент не растягивается, чтобы заполнить наш экран - а также колонки должны иметь равную высоту (извините). Может быть, мне нужно найти способ сделать это с помощью javascript? – Cody

Да, что вы пробовали? Это очень просто.

Вам нужно поместить 3 столбца в оболочку (или что-то еще) и заголовок, фиксированный навигатор и нижний колонтитул вне обертки. Теперь вы можете сделать навигация, верхний и нижний колонтитулы 100% шириной и оберткой 960px.

источник

2012-02-02 20:47:23

Спасибо за ваш ответ, но моя проблема состоит в том, чтобы сделать столбцы растянутыми на всю высоту экрана, от нижней части заголовка до верхней части нижнего колонтитула, при любом размере экрана. Любые идеи о том, как этого достичь? – Cody

они называются столбцами с одинаковой высотой. Столбцы Flex - один из способов - http://www.vanseodesign.com/css/equal-height-columns/ - http://css-tricks.com/fluid-width-equal-height-columns/ - http: // woorkup.com/2009/10/11/really-simple-css-trick-for-equal-height-columns/ - http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no -hacks - http: // buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/- – Jawad

Спасибо, но недостаточно, чтобы столбцы имели равную высоту - они также должны быть внутри центрированного контейнера с шириной 960 пикселей и простирайтесь от (100% -ного) заголовка до (100% -ного) липкого нижнего колонтитула – Cody

100% ширина липкий нижний колонтитул + заголовок, но центрированный 3 столбца с высотой 100%?

ответ

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