Question

我的页面左侧有一个导航div。我希望它跨越页面的整个高度。如果内容不需要页面滚动，这很好（并且很容易），但是，有几页我有很多内容，所以页面必须滚动。然而，div只是在页面的下方稍微结束。

以下是HTML的基础知识：

<html>
    <head>
        <title> (Title) </title>
        <div id="header>
            <h1> Header </h1>
        </div>
    </head>

    <body>
        <div id="nav">
            (nav)
        </div>

        <div id="content">
            (Content)
        </div>
    </body
</html>

（我认为）相关的CSS是：

body {
  padding: 0;
  margin: 0;
  min-height: 100%;
  min-width: 100;
}
html{
  min-height: 100%;
  min-width: 100%;
  position:relative;
  margin: 0;
}

#nav {
  position: absolute;
  width: 110px;
  min-height: 100%;
  margin: 0;
  margin-top: 90px;
  padding-top: 10px;
  padding-left: 10px;
  overflow: hidden; 
}

内容div一直扩展到屏幕底部，但不会扩展到nav div。知道需要改变什么才能让它看起来正确吗？

截图 Screenshot http://i42.tinypic.com/2qbx0u0.png

编辑：完整的base.html模板

<!DOCTYPE html>
<html>
  <head>
    <title>{% block title %} Title Goes Here {% endblock %}</title>
    <div id="header">
      <h1> {% block head %} Header Goes Here {% endblock %}</h1>
    </div>
    <div id="logo">
      <img src="{{ MEDIA_URL }}logo.png" alt="logo" width="125" height="125">
      <!--<img src="http://www.tecnospotsolar.com/content/images/yingli_logo_1.png" alt="logo" width="270" height="81"> -->
    </div>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="{{ STATIC_URL }}layout1.css" rel="stylesheet" type="text/css">
  </head>

  <body>

    <div id="nav">
      {% block nav %}
      <ul>
    <li><a href="/workflow/"> Home </a> 
    <li><a href="/workflow/new"> New Entry </a>  
    <li><a href="/workflow/list/request/"> Requests </a> 
    <li><a href="/workflow/list/approved/"> Approved </a> 
    <li><a href="/workflow/list/rejected/"> Rejected </a> 
    <li><a href="/workflow/list/fulfilment/"> Fulfilment </a> 
    <li><a href="/workflow/list/poa/"> POA </a>
    <li><a href="/workflow/list/confirmed/">  Confirmed </a>
    <li><a href="/workflow/profile/"> Profile </a>
    </div>
      </ul>
      {% endblock %}
    </div>

    <div id="content">
      {% block content %} Body Goes Here {% endblock %}
    </div>
    <div class="clear"/>

     <div id="login">
      <a href="/workflow/login/"> Login</a>/<a href="/workflow/logout/">Logout</a>
    </div>

  </body>
</html>

和CSS ...

body {
  font-family: Helvetica, Arial, sansserif;
  font-size: 14px;
  padding: 0;
  margin: 0;
  min-height: 100%;
  min-width: 100;
}

head {
  min-width: 100%;
}

h1 {
  font-family: Helvetica, Arial, sansserif;
  font-size: 20px;
  font-weight: bold;
}

h2 {
  font-family: Helvetica, Arial, sansserif;
  font-size: 18px;
  font-weight: bold;
}

*{
  margin: 0;
}

html{
  min-height: 100%;
  min-width: 100%;
  position:relative;
  margin: 0;
}

html, body{ 
  height: 100%
}

ul{
  margin: 0;
  padding: 0;
}

.wrapper{
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -4em;
}

.footer, .push{
  height: 4em;
}

/********* ID's ************/



#nav {
  position: absolute;
  width: 110px;
  min-height: 100%;
  margin: 0;
  margin-top: 90px;
  padding-top: 10px;
  padding-left: 10px;
  border-right: 5px solid #00047A;
  border-left: 5px solid #EBDE95;
  font-weight: normal;
  background-color: #EDF3FE;
  font-size: 16px;
  overflow: visible;
}

#nav a:visited{
  color: #040638;
  font-weight: 700;
  text-decoration: none;
}

#nav a:link{
  color: #040638;
  font-weight: 700;
  text-decoration: none;
}

#nav ul{
  list-style: none;
}

#nav  ul li{
  height: 2em;
}

#nav ul li a{
  display: block;
  line-height: 2em;
}

#nav li:hover a{
  color: white; 
  font-weight: bold;
  text-decoration: none;
}

#nav ul li:hover{
  margin-left: -10px;
  padding-left: 10px;
  background-color: #13118C;
  width: 100%;
}




#content {
  position: absolute;
  padding-top: 20px;
  padding-left: 25px;
  margin-top: 95px;
  margin-left: 130px;
  min-height: 100%;
  min-width: 100%;
  background-color: #F5F5F5;
}

#content ul{
  padding-left: 15px;
}

#header {
  position: absolute;
  height: 60px;
  min-width: 100%;
  top: 0;
  background-color: #EDF3FE;
  border-bottom: 5px solid #00047A;
  border-left: 5px solid #EBDE95;
  border-top: 5px solid #EBDE95;
  padding-left: 250px;
  padding-top: 25px;
}

#logo{
  position: absolute;
  margin-top: -17px;

  padding-left: 100px;
}

#login{
  position: absolute;
  right: 0;
  padding-right: 10px;
  padding-top: 30px;
  font-size: 16px;
}

#warning{
  font-size: 16px;
  color: red;
}

/********** CLASSES *************/

.field_error{
  background-color: #F9FFAD;
}

.button-container form,
.button-container form div {
  display: inline;
}

.button-container button{
  display: inline;
  vertical-align: middle;
}

.clear{
  clear:both;
  width: 100%;
  margin: 0;
  padding: 0;
  height: 0;
}

Answer 1

要使子元素的高度为100％，您需要设置所有父元素的高度，以便在css中添加：

html, body { height: 100%; }

如果您的背景已停止滚动，那么是因为您overflow: hidden;尝试删除它，它会起作用。：）

希望它有所帮助！

Answer 2

尝试在内容div之后添加清除div。

在您的HTML中：

<html>
    <head>
        <title> (Title) </title>
        <div id="header>
            <h1> Header </h1>
        </div>
    </head>

    <body>
        <div class="wrapper">
            <div id="nav">
                (nav)
            </div>

            <div id="content">
                (Content)
            </div>
            <div class="clear"/>
        </div>
    </body>
</html>

在你的CSS中：

.clear
{
   clear:both; 
   margin:0; 
   padding:0; 
   height:0;
}

#nav
{
   height: 100%;
}

Answer 3

我提出了一个我并不特别喜欢的解决方案，但我们会看到我们是否能够忍受它。我已将标题和导航div更改为position: fixed，因此它们始终显示在屏幕上的相同位置。然后，我必须为内容提供属性z-index: -1;，以便在滚动时将其置于标题和导航的“后面”。老实说，只有少数情况会遇到这种情况，所以我认为这对我们有用。

Answer 4

我使用了您提供的代码，并添加了使其工作所需的其余代码。如果这没有帮助，那么我认为其他因素导致了问题，而不是您发布的代码。如果是这样，你可以发布一个链接到源或jsfiddle吗？

http://jsfiddle.net/G2nAw/1/

HTML CODE

<body>
    <div id="nav">
        (nav)
    </div>

    <div id="content">
        (Content)
    </div>
</body>

CSS

 body {
    padding: 0;
    margin: 0;
    min-height: 100%;
    min-width: 100;
    }
    html{
    min-height: 100%;
    min-width: 100%;
    position:relative;
    margin: 0;
    }

    #nav {
    position: absolute;
    width: 110px;
    min-height: 100%;
    margin: 0;
    padding-top: 10px;
    padding-left: 10px;
    overflow: hidden; 
    left:0;
    top:0; 
    background-color:red;
    }

#content{
    background-color:blue;
    width:500px;
    height:1000px;
    margin-left:130px;
}

Answer 5

您需要将导航div包含在父div中

使用平铺bg图像

使父div达到100％高度

然后将导航div插入其父级相对于顶部，以便它保持不变在其父div的顶部

希望有所帮助

使导航div扩展整个高度

5 个答案: