标题，导航，容器布局整个页面上没有垂直滚动条

I am having a hard time with CSS. I'm trying to create a Header, Side Nav Bar and Content Pane. Below is what I need.

我很难用CSS。我正在尝试创建一个Header,Side Nav Bar和Content Pane。以下是我的需要。

I have attempted to create this, but for some reason there is a scroll bar on the side making the header appear and disappear as I scroll.

我试图创建它,但由于某种原因,侧面有一个滚动条使标题出现并在我滚动时消失。

The only thing that needs a scroll bar is the content pane.

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

Both the Nav and Content needs extend all the way to the bottom of the browser.

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

Here is my attempt:

这是我的尝试:

        #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;
        }

Here is the HTML:

这是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>

Everything needs to auto adjust, for example the header can be any height so nav and content needs to compensate for that. I hope that makes sense.

一切都需要自动调整,例如标题可以是任何高度,因此导航和内容需要补偿。我希望这是有道理的。

Can anyone please point me into the right direction to remove the scroll bar so that the 3 containers fits perfectly in the browser?

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

Thank you in advance.

先感谢您。

2 个解决方案

#1

I re-worked your entire solution, but it still gives the intended (I hope) output. See the jsfiddle.

我重新处理了整个解决方案,但它仍然提供了预期的(我希望)输出。看到j​​sfiddle。

The changes I made were (among others):

我所做的改变是(除其他外):

1. More semantic HTML5, like using section, header, and nav elements for which they are intended (I recommend html5shiv if legacy browser support is an issue).

   更多语义HTML5,比如使用它们所针对的section,header和nav元素(如果遗留浏览器支持是一个问题,我建议使用html5shiv)。

2. More concise CSS (no !important declarations, more extensibility, etc.)

   更简洁的CSS(没有!重要的声明,更多的可扩展性等)

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;
}

Obviously you can make whatever style changes you want for your personal preferences and design requirements (like padding, margin, background-color, etc.)

显然,您可以根据个人喜好和设计要求(如填充,边距,背景颜色等)进行任何样式更改。

Your spec:

Before:

After:

The downside of this is that some of the elements use fixed heights. You'll have to adjust some stuff for different font sizes, and probably use media queries to make it all responsive.

这方面的缺点是一些元素使用固定的高度。您将不得不针对不同的字体大小调整一些内容,并且可能使用媒体查询来使其全部响应。

#2

So after doing a ton of research, tutorials mixed with some trial and error, I finally managed to get the exact solution to my problem stipulated in this question.

因此,经过大量的研究,教程与一些试验和错误相结合,我终于设法得到了这个问题中规定的问题的确切解决方案。

The HTML is as follows:

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>

The CSS is as follows:

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;
}

The code to this solution can be found here: Solution

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

I have learnt that you can subtract a % from a px in css which makes things a lot easier, I will reference this post to explain how that works:

我已经了解到你可以从css中的px中减去%,这会让事情变得容易很多,我将参考这篇文章来解释它是如何工作的: