I am currently building a website at http://grapevineiow.org/m_inspireblog.html. This website has a header and footer. The page I have linked to above features a blog in an iframe. Clearly the blog is far too long to fit into the page as one continuous piece of content, so scrollbars are required.
However, this is where there is a problem. I want to keep the scrollbars on the blog (so users can scroll through it), but I want the page to fill the window exactly, so the header and footer take up the minimum space needed. The header is fine, but the footer is being a problem.
I have tried:
Setting the height of the body and html to 100% in CSS.
Setting the height of the content to 100% in CSS, but that made the content fill the window.
Styling the footer as height:auto 0 in CSS.
...but none of these have worked.
I would like to be able to solve this problem using just CSS if possible, but I'm open to using HTML if needed. I would like to avoid Javascript.
Thank you in advance.
If you know the heights of the header and footer, you can achieve this by setting both top and bottom on the middle area like this:
<style type="text/css">
html, body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#header{
position: absolute;
top: 0;
width: 100%;
height: 100px;
background: #f09;
}
#content{
position: absolute;
width: 100%;
top: 100px;
bottom: 100px;
background: #f90;
}
#content iframe{
width: 100%;
height: 100%;
}
#footer{
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background: #90f;
}
</style>
<div id="header"></div>
<div id="content">
<iframe src="http://en.wikipedia.org/wiki/Butterfly"></iframe>
</div>
<div id="footer"></div>
Related
In my website I have two main divs - one for the banner at the top, and one for the main content. They both contain inner elements like imgs, iframes etc. but I don't think this is important for my problem which is: how can I make the scroll bar for the main content not overlap the banner?
If it helps, you can view the source for my actual website on my github. But to save wasting time looking, I've wrote a small snippet in html which demonstrates this issue:
document.getElementById("someText").innerText = "this is some content ".replace(/ /g, '\n').repeat(15);
html, body {
margin: 0;
padding: 0;
}
#header {
position: fixed;
background-color: teal;
z-index: 1;
top: 0;
height: 100px;
width: 100%;
}
#main {
postion: absolute;
top: 100px;
}
<body>
<div id="header">
header
</div>
<div id="main">
<pre id="someText"></pre>
</div>
</body>
It may be hard to see, in the snippet here on SO but the scroll bar on the right overlaps the banner and I what I want is for it to stop when it reaches the banner.
I have tried (in the CSS) setting the overflow of the body to hidden as this is the scroll bar overlapping the banner, but this just removes it entirely so I can't scroll - so clearly not what I am looking for...
I have also tried setting the overflow-y of the main div to scroll, but this does not work as a bar does appear where I want it, but it is grayed-out so not usable.
I have created a fiddle for you:
https://jsfiddle.net/3gvowvag/1/
Your HTML and JS stays the same. For your CSS:
html, body {
margin: 0;
padding: 0;
overflow-y: hidden;
}
#header {
position: fixed;
background-color: teal;
z-index: 1;
top: 0;
height: 100px;
width: 100%;
}
#main {
position: absolute;
top: 100px;
max-height: 100%;
width: 100%
overflow-y: scroll;
}
So the changes are basically to give your html, body a overflow-y: hidden and your #main a max-height and width of 100% as well as overflow-y: scroll.
This basically does what you want - though I wouldn't be 100% confident about setting up the page like that. Absolute positioning and offsetting via pixels is a bit oldschool, also setting the overflow-y to hidden for html/body, not exactly sure how those things will behave in the long term. But pretty hard to fully think of this without further context.
P.S.: awesome cat!
You just need to add overflow-y: hidden; to the body (take a look at this previous answer) and then apply overflow-y: scroll; to the #main div.
document.getElementById("someText").innerText = "this is some content ".replace(/ /g, '\n').repeat(30);
html, body {
margin: 0;
padding: 0;
}
body {
overflow-y: hidden;
}
#header {
position: fixed;
background-color: teal;
z-index: 1;
top: 0;
height: 100px;
width: 100%;
}
#main {
postion: absolute;
top: 100px;
overflow-y: scroll;
}
<body>
<div id="header">
header
</div>
<div id="main">
<pre id="someText"></pre>
</div>
</body>
You might find this easier with a flexbox layout. Maybe something like this. As example set the overflow to auto if you don't want to see the greyed out scroll bar
<div class="wrapper">
<div class="header">
header
</div>
<div class="content">
content
content
content
</div>
</div>
.wrapper{
display:flex;
flex-direction:column;
background:blue;
height: 100vw;
}
.header{
height:100px;
background-color:pink
}
.content{
background:green;
flex-grow: 1;
overflow:scroll;
}
I'm using an example code for a fixed navbar provided by bootstrap. Is there any relatively easy way to make a browser scrollbars not overlap a fixed navbar.
Here is how it is in example:
Here is what I'm trying to get:
Thanks a lot in advance.
Regards.
In order to do this, you'll need to make your header a fixed element at the top of the page and use a position: fixed container to wrap the rest of the content on your page. Here is an example:
CSS:
html, body {
width: 100%;
height: 100%;
}
#header {
position: fixed;
width: 100%;
height: 50px;
top: 0;
}
#container {
width: 100%;
position: fixed;
top: 50px;
bottom: 0;
overflow: auto;
}
HTML:
<body>
<div id="header">
<ul><!-- other header elements --></ul>
</div>
<div id="container">
<!-- All of the content of your site -->
</div>
</body>
This should be easy and has been answered 100 times, but for some reason it's not working in my code.
I want to have my footer always be at the bottom of the page, but for cases when the content doesn't fill up the full page, it should still sit at the bottom (eg: not always fixed at bottom:0)
HTML
<div class="home-wrapper">
<div ui-view="nav#home"></div>
<div ui-view="content#{{$state.current.name}}" class="content-div"></div>
<div ui-view="footer#home" class="footer-bar"></div>
</div>
CSS
html
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
body {
width: 100%;
min-height: 100%;
overflow-x: hidden;
margin: 0;
padding: 0;
}
.home-wrapper {
min-height: 100%;
position: relative;
}
.footer-bar {
height: 3em;
width: 100%;
overflow:hidden;
position: absolute;
bottom: 0;
left: 0;
}
I thought by setting the min-height on the home-wrapper we'd have no issues... it works fine when the content area is large, but on elsewise it's shoved right up at the top of the page! I suspect this might be related to the fact that I'm using AngularJS with UI-Router for state routing, and my CSS is loaded on a per-page basis.
You can see a live example up at: http://letsdolunch-web-dev.azurewebsites.net/, click the Legal link at the bottom to see the issue present itself, http://letsdolunch-web-dev.azurewebsites.net/#/legal
This question has been asked an awful lot of times here, but I am yet to find a conclusive answer to this.
I'm working to implement right and left 100% height, fixed sidebars in my design. The Left sidebar works great, but the right one floats over the (min-width'd) content when the browser is resized.
When I set the position of the bars to absolute, it behaves well with horizontal window resizing, but then the sidebars aren't fixed on vertical scroll.
Check out my jsfiddle: http://jsfiddle.net/wjhzyt0u/17/
(If you resize the window, you can see the right blue bar float over the middle grey content).
HTML
<div class="wrapper">
<section id="sidebar-nav">
</section>
<section id="content">
<p>some rad stylin' content</p>
</section>
<section id="sidebar-notif">
</section>
</div>
CSS
html, body {
position: relative;
width: 100%;
height: 100%;
}
.wrapper {
position: absolute;
height: 100%;
width: 100%;
min-width: 450px; /* dont want to squish the content too much */
}
#sidebar-nav, #sidebar-notif {
position: fixed;
height: 100%;
width: 150px;
background: lightblue;
}
#sidebar-nav {
top: 0;
left: 0;
}
#sidebar-notif {
top: 0;
right: 0;
}
#content {
margin: 0 150px;
height: 300px;
background: lightgrey;
border: 2px solid yellow;
}
Any help would be very welcome!!
My 'solution' for anyone else looking at a similar situation.
I ended up going with absolutely positioned sidebars (which scale to the size of the middle content), and added the Waypoint sticky plugin to scroll the sidebar content.
Updated JsFiddle: http://jsfiddle.net/wjhzyt0u/20/
Sticky divs stick to the top of the page on scroll - thus creating the illusion of 100% height sidebars.
Drawbacks are extra js weight + page load times.. but I'll take it for now.
Changes:
.wrapper {
position: absolute;
width: 100%;
min-width: 500px;
// removed 100% min-height, which lets the sidebars stretch to 100% height of the content.
}
#sidebar-nav, #sidebar-notif {
position: absolute; // changed to absolute from fixed.
height: 100%;
width: 150px;
background: lightblue;
}
// added sticky divs to sidebars, which stick to the top of the page on scroll (with help from Waypoints sticky plugin.
.sticky {
border: 1px solid red;
}
I want to create a html page with a header of fixed height, a middle part with variable height and a footer with fixed height. The footer and the header shall not move when scrolling.
No problem so far.
But i want the midlle part to be divided, so that the right column and the left column have seperate scrollbars and scroll independently. This is possible with overflow:scroll as long as the parts have fixed heights. But i want them zu grow and shrink with the window.
I do not linke frames and i want to alter the contents of the 2 columns frequently using javascript (ajax).
What is the best way to create such a page?
I've tested this in IE7/8 (not 6!) and recent versions of: Firefox, Chrome, Opera.
Live Demo (complete with boring colours)
The HTML is very simple:
<div id="header">header</div>
<div id="middle">
<div id="left">left</div>
<div id="right">right</div>
</div>
<div id="footer">footer</div>
On the other hand, the CSS is a bit more complicated:
html, body {
margin: 0; padding:0; border: 0;
overflow: hidden
}
#header, #middle, #footer {
position: absolute;
width: 100%
}
#header {
background: #777;
height: 150px;
top: 0
}
#middle {
background: #f00;
top: 150px;
bottom: 150px
}
#footer {
background: #777;
height: 150px;
bottom: 0
}
#left, #right {
overflow-y: scroll
}
#left {
background: #aaa;
position: absolute;
left: 0;
top: 0;
width: 50%;
height: 100%
}
#right {
background: #999;
position: absolute;
left: 50%;
top: 0;
float: right;
width: 50%;
height: 100%
}
I will explain how the CSS works if you ask me to.
Try using percentages on divs (and leave out the table). For example, you might set a header at height: 20%, and two middle scrolling divs at height: 70%; width: 50%; float:left;. This leaves the footer div at height: 10%. Changing the contents of the middle divs via ajax shouldn't change their height. But of course, this provides a variable, not fixed, header and footer.
note: these numbers are just for illustrative purposes. You'll need to adjust them, including padding/margins, which are not accounted for.