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.
--------------------------------------------------------------------------
| Header |
--------------------------------------------------------------------------
| Nav | Content |
| | |
| | |
| | |
--------------------------------------------------------------------------
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.
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:
<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?
Thank you in advance.
Aucun commentaire:
Enregistrer un commentaire