Header, Nav, 整个页面没有垂直滚动条的容器布局

Question

我在 CSS 上遇到了困难。我正在尝试创建 Header、侧导航栏和内容窗格。下面是我需要的。

我试图创建这个，但由于某种原因，侧面有一个滚动条，使 header 在我滚动时出现和消失。

唯一需要滚动条的是内容窗格。

Nav 和 Content 都需要一直延伸到浏览器底部。

这是我的尝试：

        #header{
            background-color:#000000;
        } 

        #nav {
            background-color:#ff6a00;
            width: 220px;
            float:left;       
            min-height: 100% !important;         
        }

        #section {
            background-color:#808080;
            min-height: 100% !important;
            float:left;   
        }

        .scrolling-wrapper {
            width: auto;
            position: absolute;
            margin-left: auto;
            margin-right: auto;
            overflow-y: auto;
        }

这里是 HTML:

    <div class="body-wrapper">

        <div id="header">
            asdasd
        </div>

        <div id="nav">
            asdasd
        </div>

        <div id="section">
            <div class="scrolling-wrapper">
                adasd
                @RenderBody()
            </div>
        </div>

    </div>

一切都需要自动调整，例如 header 可以是任何 height 所以 nav 和 content 需要对此进行补偿。我希望这是有道理的。

任何人都可以指出正确的方向以删除滚动条，以便 3 个容器完全适合浏览器吗？

提前谢谢你。

Answer 1

我重新设计了你的整个解决方案，但它仍然给出了预期的（我希望）输出。见 jsfiddle.

我所做的更改是（除其他外）：

更多语义 HTML5，例如使用 section、header 和 nav 元素（我推荐 html5shiv 如果旧版浏览器支持是一个问题）。
更简洁CSS（没有!important声明，更具扩展性等）

HTML:

<header id="banner">
    Hello world
</header>
<nav>
    <ul>
        <li><a href="#">Placeholder</a></li>
        <li><a href="#">Placeholder</a></li>
        <li><a href="#">Placeholder</a></li>
    </ul>
</nav>
<header id="banner2">
    Hello again...
</header>
<section>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</section>

CSS:

body,
html {
    font-family: sans-serif;
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: none;
}

* {
    box-sizing: border-box;
}

a {
    color: gray;
}

#banner {
    z-index: 999;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    background: red;
    padding: .5rem;
    height: 2rem;
}

#banner2 {
    background: orange;
    position: fixed;
    left: 20%;
    top: 2rem;
    width: 100%;
    padding: .5rem;
    height: 2rem;
    z-index: 999;
}

nav {
    position: fixed;
    height: 100vh;
    width: 20%;
    background: blue;
    margin-top: 2rem;
    padding: .5rem;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

section {
    float: right;
    width: 80%;
    padding: .5rem;
    margin-top: 4rem;
    background: green;
}

p {
    margin: 0;
    padding: 0;
}

显然，您可以根据个人喜好和设计要求进行任何样式更改（例如 padding、margin、background-color 等）

您的规格：

之前：

之后：

这样做的缺点是某些元素使用固定高度。您必须针对不同的字体大小调整一些内容，并可能使用媒体查询使其全部响应。

Answer 2

所以在进行了大量的研究、教程和一些试验和错误之后，我终于设法得到了这个问题中规定的问题的确切解决方案。

HTML如下：

<body>
    <header>
        Header
    </header>
    <div class="container">        
        <nav>
            Nav
        </nav>
        <section class="section-header-top">
            Section header top
        </section>
        <section class="section-header-bottom">
            Section header bottom
        </section>
        <section class="content">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa omnis ratione facilis fugiat ducimus totam laborum similique nisi repellat qui sit quisquam repellendus saepe voluptatem natus cum consequuntur. Cupiditate officia.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus voluptatum facilis doloremque tempore a perspiciatis recusandae? Sapiente quaerat voluptatum. Tenetur aliquid ut facere placeat rem minima saepe. Velit modi esse.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa omnis ratione facilis fugiat ducimus totam laborum similique nisi repellat qui sit quisquam repellendus saepe voluptatem natus cum consequuntur. Cupiditate officia.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus voluptatum facilis doloremque tempore a perspiciatis recusandae? Sapiente quaerat voluptatum. Tenetur aliquid ut facere placeat rem minima saepe. Velit modi esse.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa omnis ratione facilis fugiat ducimus totam laborum similique nisi repellat qui sit quisquam repellendus saepe voluptatem natus cum consequuntur. Cupiditate officia.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus voluptatum facilis doloremque tempore a perspiciatis recusandae? Sapiente quaerat voluptatum. Tenetur aliquid ut facere placeat rem minima saepe. Velit modi esse.
            </section>
        </div>
</body>

CSS如下：

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

* {
    box-sizing: border-box;
}

.container {
    position: relative;
    height: calc(100% - 31px);
}

nav {                
    background: #0094ff;  
    border:1px solid black;
    position: absolute;
    left: 0px;
    width: 220px;
    height: 100%;
}

section {       
    background: #b6ff00;  
    height: 100%;
    overflow:hidden;
    margin-left: 220px;
}

section.section-header-top{
    height:55px;
    background: #ffd800; 
}

section.section-header-bottom{
    height:34px;
    background: #ff6a00; 
}

section.content{
    /* The 89px is the 55px + 34px from header sections */
    height: calc(100% - 89px);
    overflow-y: auto;
} 

header{
    background:blue;
    height:31px;    
    border:1px solid black;
}

可以在此处找到此解决方案的代码：Solution

我了解到您可以从 css 中的 px 中减去 %，这使事情变得容易得多，我将参考 this post 来解释如何作品：

Header, Nav, 整个页面没有垂直滚动条的容器布局

Header, Nav, Container Layout without vertical scroll bar on entire page

html

css

layout