2

我的页面左侧有一个导航 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 一直扩展到屏幕底部，但不是导航 div。知道需要改变什么才能使它看起来正确吗？

截屏 截屏

编辑：完整的 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;
}
4

5 回答 5

1

尝试在您的内容 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%;
}
于 2013-06-26T15:41:38.180 回答
1

要使子元素的高度为 100%，您需要设置所有父元素的高度，因此将其添加到您的 css 中：

html, body { height: 100%; }

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

希望它有所帮助！

于 2013-06-26T15:16:01.600 回答
1

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

于 2013-06-26T16:43:06.703 回答
0

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

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

代码

<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;
}
于 2013-06-26T16:05:29.630 回答
0

您需要将导航 div 装入父 div

使用平铺背景图像使父 div 的高度为 100%

然后将导航 div 插入其父级相对于顶部的内部，使其保持在其父级 div 的顶部

希望有帮助

于 2013-09-10T20:06:35.817 回答