Как расположить DIV внизу страницы между двумя вертикальными панелями навигации - PullRequest
Новая
       3

Как расположить DIV внизу страницы между двумя вертикальными панелями навигации

0 голосов
/ 01 февраля 2010

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

html,
body {
  margin: 0px;
  padding: 0px;
  height: 100%;
  width: 100%;
  border: none;
}
#wrapper {
  position: relative;
  width: 100%;
  min-width: 940px;
  min-height: 100%;
  height: 100%;
  border: 1px solid #ff0000;
}
#nav_open {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 125px;
  height: 100%;
  border: 1px solid #ff0000;
}
#content {
  top: 0px;
  margin-left: 126px;
  margin-right: 201px;
  min-height: 100%;
  height: 100%;
  border: 1px solid #ff0000;
}
#nav_closed {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 200px;
  height: 100%;
  border: 1px solid #ff0000;
}
#content_header {
  border: 1px solid #ff0000;
}
#content_body {
  border: 1px solid #ff0000;
}
#content_footer {
  height: 15px;
  background: #df781c;
  border: 1px solid #ff0000;
}
<div id="wrapper">
  <div id="nav_open">
    nav_open
  </div>

  <div id="content">
    <div id="content_header">
      content_header
    </div>

    <div id="content_body">
      content_body
    </div>

    <div id="content_footer">
      Footer
    </div>
  </div>

  <div id="nav_closed">
    nav_closed
  </div>
</div>

1 Ответ

0 голосов
/ 01 февраля 2010

.html: 

<div id="wrapper">
 <div id="nav_open">
  nav_open
 </div>

 <div id="content">
  <div id="content_header">
   content_header
  </div>

  <div id="content_body">
   content_body
  </div>

 <div id="nav_closed">
  nav_closed
 </div>
</div>

  <div style="clear:both;">&nbsp;</div>
  <div id="content_footer">
   Footer
  </div>
 </div>

CSS: 

html, body { margin: 0px;
   padding: 0px;
   height: 100%;
   width: 100%;
   border: none;
  }

#wrapper { position: relative; 
   width: 100%;
   min-width: 940px;
   min-height: 100%;
   height: 100%;

   border: 1px solid #ff0000;
  }

#nav_open { position: absolute;
   top: 0px;
     left: 0px;
   width: 125px;
   height: 100%;

   border: 1px solid #ff0000;
             }

#content { top: 0px;
   margin-left: 126px;
   margin-right: 201px;
   min-height: 100%;
   height: 100%;

   border: 1px solid #ff0000;   
  }

#nav_closed { position: absolute;
   top: 0px;
   right: 0px;
   width: 200px;
   height: 100%;

   border: 1px solid #ff0000;   
             }

#content_header { border: 1px solid #ff0000;
  }

#content_body { border: 1px solid #ff0000;
  }

#content_footer { height: 15px;

   background: #df781c;
   border: 1px solid #ff0000;
   text-align:center;
   line-height:15px;
  }
...