I was surprised I could not find a simple answer to this problem by Googling, but most responses to scrolling content panels either did not work properly, or did not work with bootstrap.
Answers like this one have full page scroll-bars, which seems wrong.
I am simply trying to have 100% height html
and body
with no browser scrollbar, but scrolling visible on the body content area only. It needs to behave with bootstrap menu heights etc.
So far the only way seems to work, at all, is using absolutely position content and footers elements.
html {
height: 100%;
}
html body {
height: 100%;
overflow: hidden;
}
html body .container-fluid.body-content {
position: absolute;
top: 50px;
bottom: 30px;
right: 0;
left: 0;
overflow-y: auto;
}
footer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 30px;
}
But this just seems the wrong way to go about it and seems to impact Bootstrap layouts negatively. For instance, if the menu line wraps to two lines, the content area goes under the nav-bar div.
Can any please tell me the correct way to go about this styling, that is compatible with an out-of-the-box MVC Razor/Bootstrap application?
Here is a JSFiddle to work with (including my latest solution from answer below):
This question is related to
html
css
asp.net-mvc
twitter-bootstrap
less
Add the following css to disable the default scroll:
body {
overflow: hidden;
}
And change the #content
css to this to make the scroll only on content body:
#content {
max-height: calc(100% - 120px);
overflow-y: scroll;
padding: 0px 10%;
margin-top: 60px;
}
Edit:
Actually, I'm not sure what was the issue you were facing, since it seems that your css is working. I have only added the HTML and the header css statement:
html {_x000D_
height: 100%;_x000D_
}_x000D_
html body {_x000D_
height: 100%;_x000D_
overflow: hidden;_x000D_
}_x000D_
html body .container-fluid.body-content {_x000D_
position: absolute;_x000D_
top: 50px;_x000D_
bottom: 30px;_x000D_
right: 0;_x000D_
left: 0;_x000D_
overflow-y: auto;_x000D_
}_x000D_
header {_x000D_
position: absolute;_x000D_
left: 0;_x000D_
right: 0;_x000D_
top: 0;_x000D_
background-color: #4C4;_x000D_
height: 50px;_x000D_
}_x000D_
footer {_x000D_
position: absolute;_x000D_
left: 0;_x000D_
right: 0;_x000D_
bottom: 0;_x000D_
background-color: #4C4;_x000D_
height: 30px;_x000D_
}
_x000D_
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>_x000D_
<header></header>_x000D_
<div class="container-fluid body-content">_x000D_
Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>_x000D_
Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>_x000D_
Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>_x000D_
Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>_x000D_
Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>_x000D_
</div>_x000D_
<footer></footer>
_x000D_
Until I get a better option, this is the most "bootstrappy" answer I can work out:
JSFiddle: http://jsfiddle.net/TrueBlueAussie/6cbrjrt5/
I have switched to using LESS and including the Bootstrap Source NuGet package to ensure compatibility (by giving me access to the bootstrap variables.less
file:
in _layout.cshtml master page
body-content
containernavbar-fixed-bottom
on the footer<hr/>
before the footer (as now redundant)Relevant page HTML:
<div class="container-fluid body-content">
@RenderBody()
</div>
<footer class="navbar-fixed-bottom">
<p>© @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
In Site.less
HTML
and BODY
heights to 100%BODY
overflow
to hidden
body-content
div position
to absolute
body-content
div top
to @navbar-height
instead of hard-wiring valuebody-content
div bottom
to 30px
.body-content
div left
and right
to 0body-content
div overflow-y
to auto
Site.less
html {
height: 100%;
body {
height: 100%;
overflow: hidden;
.container-fluid.body-content {
position: absolute;
top: @navbar-height;
bottom: 30px;
right: 0;
left: 0;
overflow-y: auto;
}
}
}
The remaining problem is there seems to be no defining variable for the footer height
in bootstrap. If someone call tell me if there is a magic 30px variable defined in Bootstrap I would appreciate it.
Another option would be using flexbox.
While it's not supported by IE8 and IE9, you could consider:
Despite some additional browser-specific style prefixing would be necessary for full cross-browser support, you can see the basic usage either on this fiddle and on the following snippet:
html {_x000D_
height: 100%;_x000D_
}_x000D_
html body {_x000D_
height: 100%;_x000D_
overflow: hidden;_x000D_
display: flex;_x000D_
flex-direction: column;_x000D_
}_x000D_
html body .container-fluid.body-content {_x000D_
width: 100%;_x000D_
overflow-y: auto;_x000D_
}_x000D_
header {_x000D_
background-color: #4C4;_x000D_
min-height: 50px;_x000D_
width: 100%;_x000D_
}_x000D_
footer {_x000D_
background-color: #4C4;_x000D_
min-height: 30px;_x000D_
width: 100%;_x000D_
}
_x000D_
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>_x000D_
<header></header>_x000D_
<div class="container-fluid body-content">_x000D_
Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>_x000D_
Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>_x000D_
Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>_x000D_
Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>_x000D_
Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>_x000D_
</div>_x000D_
<footer></footer>
_x000D_
Source: Stackoverflow.com