Создание нижнего колонтитула не повыситься выше нижней части экрана без посторонней разметки

Question

Создание нижнего колонтитула не повыситься выше нижней части экрана без посторонней разметки

Если бы только необходимо было волноваться о браузерах Firefox и WebKit, что CSS Вы использовали бы, чтобы заставить нижний колонтитул в следующем HTML не повыситься выше нижней части или экрана (и понижаться, если бы содержимое тела продвинуло его)?Примечание: Я не хочу добавлять любую разметку к странице.

<html>
    <body>
        <header>...</header>
        <article>...</article>
        <aside>...</aside>
        <footer>...</footer>
    </body>
</html>

Вот некоторый HTML вставки копии. Как я должен изменить CSS, чтобы заставить его работать?

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            ul {
                list-style: none;
            }

            p {
                margin-bottom: 10px;
            }

            article {
                display: inline-block;
                height: auto;
                width: 69%;
            }

            aside {
                display: inline-block;
                height: auto;
                width: 30%;
            }

            footer {
                height: 30px;
            }
        </style>
    </head>
    <body> 
        <header>
            <h1>Lorem Ipsum</h1>
        </header> 
        <article>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu viverra mauris. Fusce at erat risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed tincidunt orci eget justo ornare vel iaculis mauris commodo. Ut id leo ipsum. Donec nunc est, convallis sit amet vehicula eget, laoreet id odio. Proin vitae purus magna. Maecenas lorem lacus, convallis ac imperdiet in, ullamcorper sed leo. Maecenas suscipit justo at arcu placerat eu ultricies orci placerat. Etiam vel erat in metus porttitor tristique vel ultricies ante. Aliquam sed porttitor nunc. Sed venenatis, sapien lacinia laoreet facilisis, lectus turpis iaculis leo, nec rhoncus tellus erat bibendum felis. Integer cursus malesuada sem id vehicula. Duis venenatis pellentesque nisi ut vulputate. Nunc elit sapien, pulvinar blandit suscipit ut, imperdiet ut neque. Cras odio dolor, commodo vitae malesuada sed, tempus sed neque.</p>
            <p>Sed nec ornare libero. Vivamus ut risus at ligula dignissim lobortis. Pellentesque dignissim iaculis fringilla. Quisque porta sagittis massa eu euismod. Vivamus nunc lectus, iaculis vitae tincidunt et, placerat at risus. Nunc elementum massa at ligula blandit quis volutpat nulla malesuada. Nunc felis massa, placerat at vehicula non, gravida a nibh. Fusce adipiscing magna et nisl aliquet vehicula posuere tortor tempor. Aliquam erat volutpat. Duis eu enim sit amet lacus hendrerit elementum vitae a purus.</p>
            <p>Phasellus porttitor congue tellus, eget rhoncus eros consequat a. Donec faucibus lorem at sapien aliquam tempus. Sed sed vulputate magna. Proin eros felis, eleifend vitae posuere vel, dictum ut purus. Pellentesque id felis sit amet neque consectetur porta. Donec non tellus augue, a sollicitudin libero. Nullam blandit hendrerit lacus. Quisque ac libero sapien. Etiam luctus tellus non sapien fringilla ultrices. Aliquam ut erat ut sapien mattis rhoncus nec eu enim. Aenean elementum dui in ligula fermentum nec egestas dui luctus. Praesent sed purus id tellus lacinia aliquam. Donec luctus, metus ut pulvinar bibendum, sapien dui aliquet est, volutpat cursus enim massa non sapien. Quisque mollis nisl a arcu ullamcorper porta. Nunc dapibus pellentesque dui in varius. Donec et eros ut lacus commodo vehicula.</p>
        </article> 
        <aside>
            <ul>
                <li>One</li>
                <li>Two</li>
                <li>Three</li>
                <li>Four</li>
                <li>Five</li>
            </ul>
        </aside> 
        <footer>
            <span>Made by me.</span>
        </footer> 
    </body> 
</html>

12

html css html5

задан Jason Christa 15 July 2010 в 21:41

10 ответов

Другие вопросы по тегам:

html css html5

Похожие вопросы:

score 0 · Answer 1

CSS:

* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}

HTML:

<html>
    <head>
        <link rel="stylesheet" href="layout.css" ... />
    </head>
    <body>
        <div class="wrapper">
            <div class="header"></div>
            <div class="article"></div>
            <div class="aside"></div>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
    </body>
</html>

score 0 · Answer 2

Хорошо, вот альтернативный CSS, о котором я говорил. Он работает в Firefox, Safari и Chrome. IE7 / IE6 не работают, вам, вероятно, придется немного настроить, чтобы это заработало. В Opera есть небольшая ошибка с полями основного текста. В остальном он использует только базовый CSS (в отличие от display: table, который не очень совместим).

<html>
<head>
    <title>Test page</title>
    <style>
        body{
            margin:0px;
            background-color:green;
            margin-top:75px;
            margin-bottom:25px;
        }
        #page_container{
            max-width:700px;
            margin-left:auto;
            margin-right:auto;
            position:relative;
            height:100%;
            padding-top:75px;
            margin-top:-75px;
        }
        #header{
            background-color:red;
            text-align:center;
            font-size:25px;
            font-weight:600;
            height:75px;
            z-index:2;
            position:absolute;
            top:0px;
            width:100%;
        }
        #contents{
            background-color:yellow;
            width:100%;
            min-height:100%;
        }
        #footer{
            background-color:blue;
            height:25px;
        }    
    </style>
</head>
<body>
    <div id='page_container'>
        <div id='header'>Title of your page</div>
        <div id='contents'>
            Foo bar baz<br/>
            Foo bar baz<br/>
            Foo bar baz<br/>
            Foo bar baz<br/>
            Foo bar baz<br/>
            Foo bar baz<br/>
        </div>
        <div id='footer'>This is a footer</div>
    </div>
</body>
</html>

Ого, если бы вы немного изменили его и сделали совместимым с IE6-7, вы были бы знамениты. Думаю, это первое решение, которое я видел.

score 0 · Answer 3

Вы можете легко модифицировать это использование, чтобы оно работало для вас: Float div to bottom of screen

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

score 1 · Answer 4

Думаю, я понял это:

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> 
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.1.1/build/cssreset/reset-min.css">
<style type="text/css">
    html {
        background-color: orange;
        height: 100%;
    }

    body {
        background-color: yellow;
        height: auto;
        min-height: 100%;
        position: relative;
    }

    ul {
        list-style: none;
    }

    p {
        margin-bottom: 10px;
    }

    header {
        background-color: red;
        display: block;
    }

    article {
        background-color: blue;
        display: inline-block;
        margin-bottom: 30px;
        vertical-align: top;
        width: 70%;
    }

    aside {
        background-color: green;
        display: inline-block;
        margin-bottom: 30px;
        vertical-align: top;
        width: 30%;
    }

    footer {
        background-color: pink;
        bottom: 0;
        height: 30px;
        left: 0;
        position: absolute;
        width: 100%;
    }
</style>

score 0 · Answer 5

Поскольку вы упомянули, что ваше решение работает, кроме IE, все, что вам нужно сделать, это использовать JS для включения стилизации элементов HTML 5:

http://medero.org/finally.html

Это заставит стили применяться, но все равно похоже, что, по крайней мере, в IE6 нужна дополнительная помощь.

Это близко к тому, что вам нужно для IE?

score 2 · Answer 6

Учитывая требования отсутствия дополнительной разметки и не заботы об IE (работает ли IE8), я представляю это решение (которое требует использования заголовка фиксированной высоты). Мне пришлось использовать float, а не display: inline-block, так как мой Safari 4.0 не отображал его с min-height для этого решения:

   <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        html {
            height: 100%;
            }
        body {
            height: 100%;
            /*below for illustration only*/
            background: yellow;
            }

        #Header {
            position: relative;
            z-index: 1;
            height: 60px;
            margin-bottom: -60px;
            /*below for illustration only*/
            background: red;
            opacity: .8;
            }

        #Article {
            float: left;
            min-height: 100%;
            width: 69.9%;
            vertical-align: top;
            margin-bottom: -30px;               
            /*below for illustration only*/
            background: blue;
        }

        #Aside {
            float: left;
            min-height: 100%;
            width: 30%;
            vertical-align: top;
            margin-bottom: -30px;               
            /*below for illustration only*/
            background: green;
        }

        #Article:before,
        #Aside:before {
            content: ' ';
            display: block;
            height: 60px;
            width: 100%;
        }

        #Article:after,
        #Aside:after {
            content: ' ';
            display: block;
            height: 30px;
            width: 100%;
        }

        #Footer {
            position: relative;
            z-index: 1;
            height: 30px;
            margin-top: -30px;
            clear: left;
            /*below for illustration only*/
            background: pink;
            opacity: .8;
        }
    </style>

HTML просто:

<body>
    <div id="Header">Header</div>
    <div id="Article">Article</div>
    <div id="Aside">Aside</div>
    <div id="Footer">Footer</div>
</body>

score 0 · Answer 7

Я думаю, вы говорите об отступе в 10-15 пикселей под колонтитулом. Попробуйте добавить этот код в ваш CSS;

body { margin-bottom:0px; }

По умолчанию тело имеет отступ 10-15 пикселей, поэтому, чтобы убрать его, чтобы выровнять дизайн сверху или снизу, вы должны указать телу нулевой отступ.

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

score 0 · Answer 8

Прежде всего, независимо от того, что вы делаете, вам понадобится оберточный div для всей страницы. Я обычно называю его #page_container или как-то так. Если подумать, то наличие контейнера div для всей страницы не противоречит сути таблиц стилей css. С другой стороны, если бы у вас была куча оберток, разбросанных по html-странице, это могло бы стать довольно беспорядочным со всей этой дополнительной разметкой. Поэтому я всегда использую page_container в своих макетах, даже если я не накладываю на него никаких css-стилей, он у меня всегда есть. По сути, он будет действовать как тег body, только позволит вам стилизовать его.

С учетом сказанного, есть несколько решений, если ваш макет был доработан:

<html>
...
<body>
<div id='page_container'>
    <div id='header'></div>
    <div id='contents'></div>
    <div id='footer'></div>
</div>
</body>
</html>

Только Firefox, говорите? Я правильно расслышал? Не думаю, что я когда-либо слышал, чтобы кто-то говорил это раньше. В этом случае все довольно просто. Самым простым решением было бы:

<html>
<head>
    <title>Test page</title>
        <style>
            body{
                background-color:green;
                margin:0px;
            }
            #page_container{
                width:700px;
                margin-left:auto;
                margin-right:auto;
                display:table;
                height:100%;
            }
            #header{
                background-color:red;
                text-align:center;
                font-size:25px;
                font-weight:600;
                height:75px;
                display:table-row;
            }
            #contents{
                background-color:yellow;
                display:table-row;
            }
            #footer{
                background-color:blue;
                height:25px;
                display:table-row;
            }   
    </style>
</head>
<body>
    <div id='page_container'>
        <div id='header'>Title of your page</div>
        <div id='contents'>
            Foo bar baz<br/>
            Foo bar baz<br/>
            Foo bar baz<br/>
            Foo bar baz<br/>
            Foo bar baz<br/>
            Foo bar baz<br/>
        </div>
        <div id='footer'>This is a footer</div>
    </div>
</body>
</html>

Я экспериментировал с некоторыми другими стилями css, и я думаю, что у меня почти есть макет, который может быть кросс-браузерным. Я опубликую его, если не опоздаю.

score 0 · Answer 9

Работает и проверено на:
Google Chrome
Safari
Opera
Internet Explorer
Firefox

РЕДАКТИРОВАННЫЙ КОД (добавлен overflow:auto; в #aside и #Article, чтобы исправить переполнение)

<!DOCTYPE html>
    <html>
      <head>
        <style type="text/css">
          html,body{height:100%;width:100%;margin:0;padding:0;background-color:red;}
          #Header,#Article,#Aside,#Footer{position:absolute;}
          #Header{top:0;left:0;width:100%;height:60px;background-color:blue;}
          #Article,#Aside{top:60px;overflow:auto;bottom:30px;}
          #Article{left:0;width:70%;background-color:green;}
          #Aside{right:0;width:30%;background-color:yellow;}
          #Footer{bottom:0;left:0;width:100%;height:30px;background-color:pink;}
        </style>
      </head>
      <body>
        <div id="Header">Header</div>
        <div id="Article">Article</div>
        <div id="Aside">Aside</div>
        <div id="Footer">Footer</div>
      </body>
    </html>

PS: Цвета фона являются иллюстративными, поэтому css может быть более компактным, избегая повторяющихся атрибутов!

score 0 · Answer 10

* { display:block; }

После этого вам придется изменить отображение на inline в вашей обертке.

0

ответ дан 2 December 2019 в 23:50