HTML5/CSS 与内容成比例的垂直导航高度

Question

        #wrapper{
        width: 960px;
        margin:0 auto;
        font-family: "Arial", Helvetica, sans-serif;
        border: 2px solid black;
        }

        #header{
        background-color:#2C394F;
        color: white;
        text-align: center;
        padding: 5px;
        }

        #nav{

        line-height: 30px;
        float: left;
        padding: 5px;
        height: #content;
        width: 150px;
        }

        #content{
        float: center;
        padding: 10px;

        }

        #footer{
        background-color: #2C394F;
        color: white;
        text-align: center;
        padding: 5px;
        }

    </style>

</head>

<body id="wrapper">


<div id="header">

        <h1>Title</h1>

</div>

<div id="nav">
    <a href="/page1.html">title</a><br>
    <a href="/page2.html"></a><br>
    <a href="/page3.html"></a><br>
    <a href="/page4.html"></a><br>
    <a href="/page5.html"></a><br>
</div>


<div id="content">

    <h3></h3>
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>


    <h3></h3>

    <h3></h3>
        <ul>
            <li>
                <ul>
                    <li></li>           
                </ul>
            </li>
        </ul>
    <h3></h3>   

        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>

    <h3></h3>

        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>       
        </ul>

</div>


<div id="footer">

    <p>&copy; 2015 </p>

</div>

有没有办法获取nav高度，根据内容的高度自动判断需要多长？我最终会将内部 css 放入外部 css 文件中，供稍后使用不同内容高度的其他页面使用。我只需要导航与内容成比例并在页脚之前结束。

Answer 1

内容应自动确定其容器元素的高度。当您浮动内容时，您的填充和边距不会被视为内容的一部分。浮动时保持内容高度的最好方法是在浮动元素（在它们的父元素内）和clear:left;之后添加另一个块级元素。

.clearLeft{
  clear:left;
}

Answer 2

等高列的方法有很多，我最喜欢的一种是使用单一布局技巧：

.wrapper{
        width: 960px;
        margin:0 auto;
        font-family: "Arial", Helvetica, sans-serif;
        border: 2px solid black;
}

.header{
        background-color:#2C394F;
        color: white;
        text-align: center;
        padding: 5px;
        background: DeepSkyBlue;
}

.nav{

        line-height: 30px;
        float: left;
        padding: 5px;
        width: 150px;
        margin-bottom: -9999px;
        padding-bottom: 9999px;
        background: MediumSeaGreen;
}

.container{
        overflow: hidden; 
}

.content{
        padding: 10px;
        background: Orchid;
        height: 500px; /* only for a sample */
}

.footer{
        background-color: #2C394F;
        color: white;
        text-align: center;
        padding: 5px;
}

<div class="wrapper">
  <div class="header">Header</div>
  <div class="container">
    <div class="nav">Nav</div>
    <div class="content">Content</div>
  </div>
  <div class="footer">Footer</div>
</div>

此外，没有这样的浮点值'center'。

Answer 3

table display

的解决方案

        #wrapper{
        width: 960px;
        margin:0 auto;
        font-family: "Arial", Helvetica, sans-serif;
        border: 2px solid black;
        }

        #header{
        background-color:#2C394F;
        color: white;
        text-align: center;
        padding: 5px;
        }

        #nav{

        line-height: 30px;
        padding: 5px;
        width: 100px;
          background-color: #eed;
          margin:5px
        }

        #content{
/*        float: center; that does not exists!!*/
        padding: 10px;
          

        }

        #footer{
        background-color: #2C394F;
        color: white;
        text-align: center;
        padding: 5px;
        }

#container{
  display:table    
}

#nav,#content{
  display:table-cell;
   height:100%
}

<body id="wrapper">


<div id="header">

        <h1>Title</h1>

</div>
<div id="container"> 
  
<div id="nav">
    <a href="/page1.html">title</a><br>
    <a href="/page2.html">title</a><br>
    <a href="/page3.html">title</a><br>
    <a href="/page4.html">title</a><br>
    <a href="/page5.html">title</a><br>
</div>


<div id="content">
The content
    <h3></h3>
        <ul>
            <li>li</li>
            <li></li>
            <li></li>
        </ul>


    <h3></h3>

    <h3></h3>
        <ul>
            <li>
                <ul>
                    <li></li>           
                </ul>
            </li>
        </ul>
    <h3></h3>   

        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>

    <h3></h3>

        <ul>
            <li></li>
            <li>li</li>
            <li></li>
            <li>li</li>       
        </ul>

</div>


</div>
<div id="footer">

    <p>&copy; 2015 </p>

</div>
</body>

HTML5/CSS 与内容成比例的垂直导航高度

HTML5/CSS Vertical Nav height proportional to content

javascript

css

html

nav