хочу, чтобы нижний колонтитул оставался внизу, но не абсолютным

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

#footerWrapper { 
height: 177px; 
bottom: 0; 
position: absolute; 
width: 100%; 
}

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

как я хотел бы, чтобы он оставался на странице, а не нижним колонтитулом, являющимся абсолютным.

любые идеи.

источник

2014-03-24 al123

Используйте «margin-top» на нижнем колонтитуле и дайте ему процент, например у меня есть «margin-top: 20%», и он отлично работает. Также измените 'position' на' relative'. – Dayan

Я был в состоянии держать футер липким и не обгонять заголовок с помощью Z-индекса. Просто дайте высшим DIVs более высокие z-индексы.

#headWrapper { 
     padding-bottom: 0px; 
     position: relative; 
    } 
    #headWrapper { 
     z-index: 2; 
    height: 160px; 
     /* width: 960px; */ 
     margin: 0 auto; 
     background: url(/images/PageImages/homeHeadBack.png) repeat-x; 
    } 

    #footerWrapper { 
     background: url(/images/PageImages/footerBack.png) repeat-x; 
     height: 177px; 
     position: absolute; 
     width: 100%; 
     bottom: 0; 
     z-index: 1; 
    }

Обратите внимание, что #headWrapper необходимо указать позицию: относительная. Думаю, вы можете начать с этого. Работал на Chrome.

источник

2014-03-24 18:11:23 SamuraiCharlie

Попробуйте

#footerWrapper{ 
    position: fixed; 
} 

#contentWrapper{ 
    margin-bottom: 177px; // height of the footer 
}

источник

2014-03-24 17:54:42 James

Да, я понимаю, что вы делаете. но проблема не в каждом браузере одинакового размера, когда я устанавливаю 177px, нижний колонтитул не находится внизу. – al123

Чтобы предотвратить перекрытие нижнего колонтитула на контенте, я дал нижнее поле для раздела содержимого, которое является высотой нижнего колонтитула. Это покажет лучший результат. Но когда дело доходит до отзывчивости, да, это не хорошо.Я думаю, что в этом случае вам придется изменить нижний край от пикселей до процента в медиа-запросах. – James

Я использую это, и она отлично работает, на мобильные телефоны тоже ...

HTML:

<body> 
    <div id="wrapper"> 
     <div id="header"></div> 
     <div id="content"></div> 
     <div id="footer"></div> 
    </div> 
</body>

CSS:

html, 
body { 
    margin:0; 
    padding:0; 
    height:100%; 
} 
#wrapper { 
    min-height:100%; 
    position:relative; 
} 
#header { 
    padding:10px; 
    background:#5ee; 
} 
#content { 
    padding:10px; 
    padding-bottom:80px; /* Height of the footer element */ 
} 
#footer { 
    width:100%; 
    height:80px; 
    position:absolute; 
    bottom:0; 
    left:0; 
    background:#ee5; 
}

источник:

http://www.cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/

демо:

http://www.cssreset.com/demos/layouts/how-to-keep-footer-at-bottom-of-page-with-css/

источник

2014-03-24 18:02:23 pooler

не возможно нижний колонтильный абсолютный – al123

Хорошо, я не уверен, но я думаю, что я понимаю, что вы пытаетесь достичь

#footerWrapper { 
    background: url(/images/PageImages/footerBack.png) repeat-x; 
    height: 177px; 
    position: fixed; 
    width: 100%; 
    bottom: 0px; 
} 

#contentWrapper { 
    background: url(/images/PageImages/contentTopBack.png) no-repeat center top; 
    min-height: 208px; 
    margin-bottom: 177px; 
}

Если это не исправить, чем я не понимаю, что вы стремитесь.

источник

2014-03-24 18:11:48 Deonoway

такой же проблема. потому что внизу установлено значение: 0px, это означает, что он все равно будет подниматься – al123

Ну, если вы не хотите, чтобы он переместился со страницей, почему бы вам просто не потрудиться с фиксированным или абсолютным? пусть это будет частью потока ваших страниц. – Deonoway

попробуйте этот.

HTML:

<html> 
<head> 

    <link rel="stylesheet" href="layout.css" ... /> 

</head> 

<body> 

    <div class="wrapper"> 

     <p>Your website content here.</p> 

     <div class="push"></div> 

    </div> 

    <div class="footer"> 

     <p>Copyright (c) 2014</p> 

    </div> 

</body> 

</html>

CSS:

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

более information.

источник

2014-03-29 17:01:53

хочу, чтобы нижний колонтитул оставался внизу, но не абсолютным

ответ

Смежные вопросы