Как разделить деление на секции (работа с минимальной высотой 100%)?

0

Я использую следующую схему: http://peterned.home.xs4all.nl/examples/csslayout1.html

Прямо сейчас я пытаюсь создать что-то вроде этого: http://imgur.com/P64BojY

Я хотел бы иметь заголовок, два div в середине страницы и фиксированный нижний колонтитул. Все divs (кроме нижнего колонтитула) должны быть одного размера.

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

Для моих других страниц мне нужно будет использовать одну и ту же схему, за исключением нижнего div, который должен быть разделен на 3 divs, например: http://imgur.com/XuxxlAE

Я не уверен, как это сделать, так как я работаю с минимальной высотой 100%...

Так что да... любая помощь будет оценена! благодаря

Теги:

2 ответа

0

Попробуйте это решение, я заменил div-содержимое двумя div файлами с содержимым класса

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>
<style>
html, body {
    background: none repeat scroll 0 0 #808080;
    color: #666666;
    font-family: arial,sans-serif;
    font-size: small;
    height: 100%;
    margin: 0;
    padding: 0;
}
h1 {
    font: 1.5em georgia,serif;
    margin: 0.5em 0;
}
h2 {
    font: 1.25em georgia,serif;
    margin: 0 0 0.5em;
}
h1, h2, a {
    color: #FFA500;
}
p {
    line-height: 1.5;
    margin: 0 0 1em;
}
div#container {
    background: none repeat scroll 0 0 #F0F0F0;
    height: auto !important;
    margin: 0 auto;
    min-height: 100%;
    position: relative;
    width: 750px;
}
div#header {
    background: url("../csslayout.gif") no-repeat scroll 98% 10px #DDDDDD;
    border-bottom: 6px double #808080;
    padding: 1em;
}
div#header p {
    font-size: 1.1em;
    font-style: italic;
    margin: 0;
}
#a{padding: 1em 1em 0em 1em;}
#b{padding: 0em 1em 6em 1em;}

div#content p {
    padding: 0 1em;
    text-align: justify;
}
div#footer {
    background: none repeat scroll 0 0 #DDDDDD;
    border-top: 6px double #808080;
    bottom: 0;
    position:absolute;
    width: 100%;
}

div#footer p {
    margin: 0;
    padding: 1em;
}
</style>
</head>
<body>
  <div id="container">
        <div id="header">
            <h1>CSS layout: 100% height with header and footer</h1> 
            <p>Sometimes things that used to be really simple with tables can still appear pretty hard with CSS. This layout for instance would consist of 3 cells; two with a fixed height, and a third one in the center filling up the remaining space. Using CSS, however, you have to take a different approach.</p>
        </div>
        <!--div content duplicated-->
        <div class="content" id="a">
           <h2>Min-height</h2>
           <p>Lorem ipsum...</p>
        </div>
        <div class="content" id="b">
           <h2>Min-height</h2>
           <p>Lorem ipsum...</p>
        </div>

        <div id="footer">
            <p>
              This footer is absolutely positioned to bottom:0; of  #container. The padding-bottom of #content keeps me from overlapping it when the page is longer than the viewport.
            </p>
        </div>
    </div>
</body>
</html>
Поделиться
  • 0
    Дивы A и B здесь не одного размера .. Спасибо!
0

это то, чего ты хочешь? проще просто показать вам jsfiddle, чтобы вы проверили необходимый css.

<div class="container">
<div class="containerDivs">
    <div class="div1">
           div1
    </div>    
    <div class="div2">
            div2
    </div> 
</div>     

<div class="footer">
        footer
</div>

</div>

http://jsfiddle.net/QcG7a/

Поделиться
  • 0
    Если вы хотите добавить заголовок, просто сделайте div выше «containerDivs», задайте ему xxPX в качестве высоты и добавьте то же количество пикселей, что и «padding-top» в containerDivs.
  • 0
    модифицированная скрипка с 3 делителями ... (это не может быть точно такого же размера ... только 33%, 33% и 34%) jsfiddle.net/QcG7a/1
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню