I wonder how can I achieve in Bootstrap 3-row grid layout, with content row fills screen size ( and header and footer are fixed height ).
Here is an image what I am trying to achieve:
I would nest the header and footer within a content div and set this content div to 100% height with a top and bottom padding that equals the height of the header/footer.
Example 1: http://jsfiddle.net/52VtD/6841/
Example 2 (with Bootstrap columns): http://jsfiddle.net/52VtD/6842/
Example 3 (with scrollable inner container): http://jsfiddle.net/52VtD/6843/
HTML
html, body {
height: 100%;
}
.content {
height: 100%;
position: relative;
padding: 40px 0;
background: yellow;
}
.header {
width: 100%;
height: 40px;
position: fixed;
top: 0;
background: black;
}
.footer {
width: 100%;
height: 40px;
position: fixed;
bottom: 0;
background: black;
}
Related
I have some content that is in an iFrame and a Footer that I want to be fixed, but I want the size of the footer to change based upon the user's screen size and I want the footer graphic to fill the footer. The footer has a background image that uses background-size: cover. So when the user has a wide screen, the footer should be as wide as the screen and the height should maintain the aspect ratio of the background image.
My HTML looks like this:
<div id="content">
<iframe id="xyz">
</iframe>
</div>
<div id="footer">
<div id="innerFooter">
</div>
</div>
My CSS looks like:
#content {
top: 0px;
left: 0;
position: relative;
border: 1px solid #6AA3D4;
width: 100%;
height: 100%;
}
iframe {
width: 100%;
height: 100%;
}
#footer {
width: 100%;
height: 100%;
background-color: #fff;
bottom: 0;
position: absolute;
width: 100vw;
}
.innerFooter {
background: url("images/footerMain.png");
height: 100%;
width: 100%;
background-size: cover;
position: relative;
display: inline-block;
}
I want my footer to be at the bottom of the page and to resize appropriately (height/width) to fully fit the background graphic.
I also want my main content (iframe) to be the full height of the page to the top of the footer.
Right now my iframe is not the full height of the page.
instead of position:absolute to footer use position:fixed and height should be in pixel for footer not in %.
#footer {
width: 100%;
height: 60px; /*changed percent to pixel*/
background-color: #fff;
bottom: 0;
position: fixed; /*changed absolute to fixed*/
width: 100vw;
}
see more on CSS positioning: Here
I have a sidebar on the right that'll pop out from off-screen once triggered. I keep it in the body tag because it needs to always be the same height as the entire page which varies from page-to-page. If I give the body an overflow-x: hidden, it'll hide the contents on smaller browser windows and not allow them to scroll. Is there any way around this?
I need the sidebar to scroll with the page, so I can't use position: fixed
html {
height: 100%;
}
body {
min-height: 100%;
position: relative;
}
#sidebar {
position: absolute;
top: 0;
right: -100px;
width: 100px;
height: 100%;
}
<div id="sidebar"></div>
This is just a stripped down example.
One simple answer is to place the sidebar inside a position: absolute container (.hideScroll) which has overflow: hidden.
The new parent is given the entire width and height of the viewport and wont affect body scrolling.
In this example I have used viewport percentage lengths (vh) instead of percentage heights. These units get their height from the viewport and are not relative to any parents.
Example
Hover over the body in the window to trigger the sidebar.
.hideScroll {
overflow: hidden;
position: absolute;
height: 100vh;
left: 0;
top: 0;
width: 100%
}
#sidebar {
position: absolute;
top: 0;
width: 100px;
height: 100vh;
background: #F00;
right: -100px;
transition: right 1s;
}
body {
margin: 0;
/*150 height is for the example to make the body scroll*/
height: 150vh;
}
/*For example to show the sidebar on body hover*/
body:hover #sidebar {
right: 0;
}
<div class="hideScroll">
<div id="sidebar">Content</div>
</div>
Add display: none; to the sidebar:
#sidebar { display: none; position: absolute; top: 0; right: -100px; width: 100px; height: 100%; }
Then when you move it into the main window, set display: block; at the same time.
I'm using bootstrap in conjunction with Shiny and R. But this doesn't really matter, because Shiny just uses a normal bootstrap installation.
So my footer is coded like this:
/* Sticky Footer */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 40px;
}
.footer {
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 40px;
background-color: #f5f5f5;
}
/* End Sticky Footer
And basically it works nicely. What doesn't work is the resizing I guess after all content is loaded. Since R computes a lot in the background even after the HTML code etc. is loaded, the size of the page usually gets quite bigger after loading. But then my sticky footer overlaps the content and I have been struggling with this now all day and haven't found a solution yet. Any ideas?
<body>
<div id="wrapper">
<div id="main-content">
</div>
<footer>
</footer>
</div>
</body>
CSS:
body,html {
height: 100%;
}
body {
min-height: 100%;
}
#wrapper {
height: 100%;
position: relative;
}
#main-content {
background-color: red;
height: 1000px;
width: 100%;
}
footer {
clear: both;
position: static;
bottom: 0;
height: 40px;
width: 100%;
background-color: blue;
}
Example: https://jsfiddle.net/a5xtu95z/
I don't have much experience with bootstrap but I can't see why this wont work?
Please try this reference link for the Sticky footer layout
http://getbootstrap.com/examples/sticky-footer-navbar/
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
I have a common page structure with fixed header and a sticky footer. But I can't get around how to extend the div heights to fill the full window area.
HTML
<header>
header header header
</header>
<div id="page">
<div id="left">side bar side bar</div>
<div id="right">
<p>I want to draw the brown dashed line all the way down to the footer even when the #right content is too little to fill the window.</p>
<p>I know that I have to set height 100% on #right so that it stretches to fill the green box. But, the green box itself does not stretch to the bottom despite height 100% because the yellow box does not have explicit height defined.</p>
<p>What can I do?</p>
</div>
</div>
<footer>
footer footer footer
</footer>
CSS
html, body, foot, header, div { padding: 0; margin: 0; box-sizing: border-box; }
p { margin-top: 0 }
html { height: 100%; min-height: 100%; }
header { position: fixed; background-color: red; height: 50px; width: 100%; }
footer { position: absolute; bottom: 0; width: 100%; background-color: cyan; }
body {
position:relative; /* container for footer */
border: 5px solid yellow;
min-height: 100%; /* not explicitly setting height to allow footer to be pushed downwards */
}
#page {
padding: 60px 0 20px 0;
border: 5px solid green;
height: 100%; /* not working: how to extend page all the way to the bottom, min-height = fill the window? */
}
#page:after { content:""; display: block; clear:both; }
#left { float: left; width: 100px; }
#right {
margin-left: 100px;
padding-left: 10px;
/* objective: to create vertical divider between #right and #left that extends to the footer */
height: 100%;
border-left: 5px dashed brown;
}
OK, the reason why height 100% is not working its because body does not have a height at all, its height depends of the items inside body.
There is a work around for this
Apply the following to your styles.
html, html body {
height: 100%;
}
#page { /* If #page is a lvl 1 child of body, this should work */
height: 100%;
}
Here is the JSFiddle
http://jsfiddle.net/wetjyLy3/1/
You can use absolute positioning to make the divs always 0px away from the top and bottom of the window. You may need to play around with the values, but something like this should work:
#left { position: absolute; top: 0; bottom: 0; left: 0; width: 20%; }
#right { position: absolute; top: 0; bottom: 0; right: 0; width: 80%; }
Edit: Here's a fiddle that shows how this could work.
My objective is to make a website for my portfolio.
I have a div for the menu that wanted to be on top of another div that works as a container for all of my images. The images have to fill 100% height of the browser.
The problem is, that I wanted my website to scroll horizontally and when I start to add content, as soon as the width goes over the 100% of the browser window the new image goes under the first image making it scroll horizontally.
What can I do to correct this?
CSS
body, html {
height: 100%;
}
#main {
width: 100%;
height: 100%;
background-color: #000;
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
#menu {
width: 200px;
height: 500px;
background-color: #fff;
position: absolute;
top: 10px;
left: 10px;
overflow: scroll;
z-index: 2;
}
#img {
height: 100%;
float: left;
overflow: scroll;
}
Remove the width from your #main tag. As soon as an element hits that 100% it's going to move down to the next line.