содержание в три ряда, высота 100% с липким нижним колонтитулом

Question

содержание в три ряда, высота 100% с липким нижним колонтитулом

0

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

Может кто-нибудь создать это или кто-нибудь знает учебник, который показывает вам, как это сделать

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
    html, body
    {
        min-height:100%; height:100%; margin:0px; width:100%
    }
    body > #wrapper
    {
        margin-bottom:-240px; height:100%
    }
    header
    {
        display:block; background-color:#ffd800; height:130px;
    }
    body > #wrapper > section
    {
        display:block; background-color:#ff6a00; height:100%; margin-bottom:-240px
    }
    footer
    {
        display:block; background-color:#ffd800; height:240px
    }
</style>
    <title></title>
</head>
<body>
    <div id="wrapper">
    <section>
        <header>
            Header
        </header>

        <div id="body">
            <nav>
                Left Sidebar
            </nav>
            <article>
                <p>Content</p>            
                <p>Content</p>            
                <p>Content</p>            
                <p>Content</p>            
                <p>Content</p>            
                <p>Content</p>            
                <p>Content</p>            
                <p>Content</p>            
                <p>Content</p>            
                <p>Content</p>            
                <p>Content</p>            
                <p>Content</p>            
                <p>Content</p>            
                <p>Content</p>            
                <p>Content</p>            
                <p>Content</p>            
                <p>Content</p>            
                <p>Content</p>            
            </article>
            <aside>
                <p>Right Side Bar</p>
            </aside>
         </div>
    </section>
    </div>

    <footer>
        Footer
    </footer>

</body>
</html>

ONYX 18 сен. 2013, в 04:47

Источник

Теги:

html

css

css3

2 ответа

Ещё вопросы

Vikas Arora · Answer 1 · 2013-09-18T01-01-00.000Z

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

Просто заполните контейнер div с помощью <h1>Hello</h1> т.д. Для тестирования, и увидите нижний колонтитул, приклеенный к низу, независимо от того, сколько контента.

Riskbreaker · Answer 2 · 2013-09-18T00-24-00.000Z

Человек... там должно быть ТАК, чтобы Скрипать, вместо того, чтобы видеть это... в любом случае это то, что вам в основном нужно, чтобы заставить это работать:

html,body{height:100%;}
.wrapper{height:100% overflow: hidden;}

Я меняю часть кода (в основном, я ненавижу идентификаторы и нуждаюсь в упрощении...)

FIDDLE ME ЭТО

Недостатком этого является то, что всегда будет полоса прокрутки с некоторым оставленным расстоянием прокрутки, даже если в области содержимого более чем достаточно места для отображения содержимого без прокрутки.
ну не обязательно ... вы всегда можете поиграть с процентами: jsfiddle.net/jM4R6/4 но да я согласен с вами есть еще способы это сделать