Question

我尝试使用左侧菜单和主要内容区域创建布局，但高度无法正常工作。

的演示

html是：

<nav>
    <h2>logo</h2>
    <ul id="steps">
        <li><a href="">one</a></li>
        <li><a href="">two</a></li>
        <li><a href="">three</a></li>
        <li><a href="">four</a></li>
        <li><a href="">five</a></li>
        <li><a href="">six</a></li>
    </ul>
    <p>more links</p>
    <p>more links</p>
    <p>more links</p>
</nav>

<div id="main-container" class="clearfix">

    <div id="main-header">
        <p>lorem ipsum</p>
    </div>

    <div id="main-area">

        <section class="step-1">

            <div class="box" data-panel="panel-option1">
                <a href="#">option1</a>
            </div>
            <div class="box" data-panel="panel-option2">
                <a href="#">option2</a>
            </div>
            <div class="box" data-panel="panel-option3">
                <a href="#">option3</a>
            </div>
            <div class="box" data-panel="panel-option4">
                <a href="#">option4</a>
            </div>

        </section>

        <section class="step-2">

        </section>

        <section class="step-3">

        </section>

        <section class="step-4">

        </section>

        <section class="step-5 ">

        </section>

        <section class="step-6">

        </section>


    </div>

</div>

css是：

html,body { height: 100%; }
nav {
    float: left;
    /*display: none;*/
    background-color: #112943;
    width: 324px;
    height: 100%;
}
#main-container {
    width: 100%;
    height: 100%;
    background-color: #EEE;
}
#main-header {
    height: 160px;
    line-height: 160px;
    background-color: #005C85;
    text-align: center;
    font-size: 30px;
    color: #fff;
}
#main-area {
    position: relative;
    height: 100%;
    overflow: hidden;
    background-color: #EEE;
}
#main-area section {
    display: none;
}
#main-area section:first-child {
    display: block;
}

.step-1 {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.step-1 > div {
    position: absolute;
    width: 50%;
    height: 50%;
    text-align: center;
    cursor: pointer;
}

.step-1 > div:first-child {
    top: 0;
    left: 0;
    background: #DDD;
}

.step-1 > div:nth-child(2) {
    top: 0;
    left: 50%;
    background: #CCC;
}

.step-1 > div:nth-child(3) {
    top: 50%;
    left: 0;
    background: #72CCA7;
}

.step-1 > div:nth-child(4) {
    top: 50%;
    left: 50%;
    background: #10A296;
}

主要问题是高度，导航没有全高。

＆＃34;部分＆＃34;带有4个方框的区域应该适合宽度和高度，并显示/隐藏与导航选项相关的部分。

页面没有垂直滚动，所有div都应符合浏览器高度

也许我应该使用另一种方法？

Answer 1

有时，百分比效果不佳，请尝试使用＆＃39; vh＆＃39;。使用值＆＃39; 100vh＆＃39;用于导航。

nav{
height: 100vh;
}

它将采用父元素的完整大小，在这种情况下是浏览器。

如果这不起作用，那么请尝试继承＆＃39;继承＆＃39;

nav{
height: inherit;
}

它有时会起作用。

div布局全高，没有垂直滚动

1 个答案: