Липкий нижний колонтитул шириной 100% + верхний колонтитул, но по центру 3 столбца с высотой 100%? - PullRequest
Новая
       1

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

0 голосов
/ 03 февраля 2012

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

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

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

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

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

Ответы [ 2 ]

2 голосов
/ 04 февраля 2012

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

Разметка 

<!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;
}

РЕДАКТИРОВАТЬ 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;
}

Надеюсь, это поможет.

1 голос
/ 03 февраля 2012

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...