Подтвердить что ты не робот

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

Если вам нужно было только беспокоиться о браузерах 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>
4b9b3361

ОТВЕТЫ

Ответ 1

Учитывая требования без дополнительной разметки и не заботясь об 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>

Ответ 2

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

<!--[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>

Ответ 3

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>

Ответ 4

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

body { margin-bottom:0px; }

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

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

Ответ 5

* {   Дисплей: блок; }

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

Ответ 6

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

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

<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, и я думаю, что у меня почти есть макет, который может быть совместим с кросс-браузером. Я отправлю его, если не опоздаю.

Ответ 7

Хорошо, вот альтернатива 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, вы были бы знамениты. Я думаю, это первое решение, которое я видел.

Ответ 8

Вы можете легко изменить использование этого, чтобы работать на вас: Повернуть div в нижней части экрана

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

Ответ 9

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

http://medero.org/finally.html

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

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

Ответ 10

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

EDITED CODE (добавлено переполнение: auto; # и #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 позволяет мне более компактно, избегая повторных атрибутов!

Ответ 11

Еще один ответ для тех, кому нужно только настроить таргетинг на последние версии браузеров, используя flexbox и единицы просмотра.

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            body {
                display: flex;
                flex-direction: column;
                min-height: 100vh;
            }

            header {
                height: 60px;
            }

            article {
                flex: 1;
            }

            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> 
        <footer>
            <span>Made by me.</span>
        </footer> 
    </body> 
</html>