CSS дизайн: сохраняя относительное положение, но оставаясь на нижней части содержащего элемента - PullRequest
Новая
       33

CSS дизайн: сохраняя относительное положение, но оставаясь на нижней части содержащего элемента

1 голос
/ 13 января 2012

Прежде всего, вот ссылка: http://template1.design.sflueckiger.ch/pages/home.php

Я пытаюсь часами, но не могу найти решение.

структура страницы следующая:

корпус 

 <div: container - streches the window to all sides at 100%>
 <div: wrapper - keeps the content in the middle>
 <div: page - contains the actual content>
 <div: footer-wrapper - this one contains 3 footer-boxes>

Моя проблема в том, что я всегда хочу использовать 100% высоты. Мне удалось это хорошо с оберткой. Проблема сейчас заключается в следующем:

Я хочу, чтобы обертка нижнего колонтитула всегда оставалась внизу (margin:10px) обертки. Но мне также нужно, чтобы оболочка расширялась, когда содержимое становится выше разрешения экрана, без наложения. Поэтому мне нужно, чтобы нижний колонтитул был относительным. Это, однако, помещает его всегда непосредственно под div страницы, а не снизу.

Есть идеи? 

body{
    width: 100%;
    height:100%;
    margin: 0;
    padding: 0;
    background:whitesmoke;
}

#top-bar{
    background-color: #F0F0F0 ;
    top: 0px ;
    left: 0px;
    height: 40px ;
    position:fixed;
    width: 100%;
    border-bottom: 1px solid black ;
    z-index: 1000; 
    /*Position of content*/
    text-align:center;
    box-shadow:0px 0px 10px 3px #555;
}
#container{
    position: absolute;
    text-align: center; 
    width: 100%;
    height: 100%;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;

}

#top-bar p{
    margin-top:10px;
}

#page-wrapper{
    min-height:100%;
    width:982px;
    margin:0 auto;
    border:1px solid #555;
    background:#999;
    box-shadow:0px 0px 10px 3px #555;
    position:relative;
}

#page{
    width:960px;
    height:300px;
    margin:50px 10px 10px 10px;
    border:1px solid white;
    background:whitesmoke;

}

#page p{
    padding:10px;
}

#footer-wrapper{
    position:relative;
    bottom:0;
    width:962px;
    height:202px;
    margin:30px 10px 10px 10px !important;  
}

#footer-wrapper p{
    padding-left:10px;
}
#footer-1{
    height:200px;
    width:312px;
    margin:0px 10px 0px 0px;
    float:left;
    background:whitesmoke;
    border:1px solid white;
    border-radius:0px 0px 5px 5px;;
    -webkit-border-radius:0px 0px 5px 5px;
    -moz-border-radius:0px 0px 5px 5px;

}
#footer-2{
    height:200px;
    width:312px;
    margin:0px 10px 0px 0px;
    float:left;
    background:whitesmoke;
    border:1px solid white;
    border-radius:0px 0px 5px 5px;;
    -webkit-border-radius:0px 0px 5px 5px;
    -moz-border-radius:0px 0px 5px 5px;
}
#footer-3{
    height:200px;
    width:312px;
    margin:0px 0px 0px 0px;
    float:left;
    background:whitesmoke;
    border:1px solid white;
    border-radius:0px 0px 5px 5px;;
    -webkit-border-radius:0px 0px 5px 5px;
    -moz-border-radius:0px 0px 5px 5px;
}

Есть идеи? Опять ссылка: http://template1.design.sflueckiger.ch/pages/home.php

Ответы [ 2 ]

4 голосов
/ 13 января 2012

Еще одно решение :) Поместите нижний колонтитул вне упаковщика страниц и: 

#footer-wrapper {
    width: 962px;
    margin: -202px auto 0;
    height: 202px;
    position: relative;
}

#page {
    width: 962px;
    margin: 0 auto;
    min-height: 100%;
    height: auto !important;
    height: 100%;
}
0 голосов
/ 13 января 2012

Вот что вам нужно.

Вы хотите абсолютно позиционировать нижний колонтитул внизу, а затем добавьте столько же отступов к "странице". 

#footer-wrapper {
  bottom: 0;
  height: 202px;
  margin: 30px 10px 10px !important;
  position: absolute;
  width: 962px;
}

#page {
  background: none repeat scroll 0 0 whitesmoke;
  border: 1px solid white;
  height: 300px;
  margin: 50px 10px 320px;
  width: 960px;
}
...