I need help with css, html & bootstrap.
How I can get effects like this:
Layout
Header = Boostrap navbar (50px height)
Container = gray background on all site and center content
Left column = menu - width 220px
Right column = content with white background and 100% height
Footer = sticky footer (height: 50px)
To center I use:
<div class="container">
but I have problem with 100% height content and sticky footer.
You should put your css and html here so that anybody can suggest you easily.
For the sticky footer you need to set its position as absolute and set the main div's position as relative.
like :
html, body {
height: 100%;
min-height: 100%;
}
.container {
min-height: 100%;
height: 100%;
position: relative;
}
.footer
{
height: 20px; //according to your requirement
position: absolute;
bottom: 0px;
}
You need to do something like this: Twitter Bootstrap: div in container with 100% height
html, body {
height: 100%;
}
.container {
min-height: 100%;
height: 100%;
}
Related
I have the following code:-
.content {
width: 100%;
text-align: center;
overflow: hidden;
}
.expert-header {
position: relative;
width: 100%;
height: 565px;
display: block;
background-size: cover !important;
background: url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg);
}
<div class="content">
<div class="expert-header" style="background:url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg)" ;="">
</div>
</div>
What I want to achieve is:-
When you start shrinking the browser width from 1920px to 1170px it will cut off (crop) the left and right part of the image.
So if the browser width was at 1720px, essentially 100px will be removed from the left side of the image and 100px removed from the right but the image will retain the 565px height.
How can I achieve this?
I have made a JSFIDDLE of the code I have at the moment.
Use these settings for the background:
.expert-header {
background: url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg) center center no-repeat;
background-size: auto 100%;
}
-> i.e. height 100% of parent element, width proportional to height (auto), centered in both directions (where only the horizontal centering is effective) and witout repeating.
Here's a fiddle: https://jsfiddle.net/q3m23Ly8/1/
(I also removed the style attribute from the HTML)
Remove the inline style of the div element because it will overwrite the CSS rules:
background-size: auto 100%;
background: url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg) center;
The important part is the background-size. auto 100% will tell the browser the background should always cover 100% of the height, the width will be calculated automatically.
Try below css for responsive:
Set the div height as per you needed.
.content {
width: 100%;
text-align: center;
overflow: hidden;
}
.expert-header {
position: relative;
width: 100%;
height: 250px /* Set height as per you needed */;
display: block;
background-size: 100% auto !important;
background: url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg);
background-repeat: no-repeat !important;
}
<div class="content">
<div class="expert-header" style="background:url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg)" ;="">
</div>
</div>
The main content div #page-content-wrapper is shaded a light grey in color.
How can the height of this div be extended such that the bottom of this div is at the bottom of the screen? height: 100%; does not seem to work.
Content is growable to beyond 1 viewport height, forcing vertical scroll to be necessary.
CSS
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
background: #ddd;
height: 100%;
}
Bootply: http://www.bootply.com/kkrDITPGrO
Use height: 100vh ... or give #wrapper and html, body also height: 100%
For an element to respond to a height using percent, its parent need a height, and if the parent also use percent, you need to go all the way to the html/body element for it to be able to calculate its height on something other than auto.
Updated bootply
Update based on comment
For content to be able to grow, use min-height: 100vh ... or min-height: 100% using the same "percent" principle as above
#page-content-wrapper {
min-height: 100vh;
width: 100%;
position: absolute;
padding: 15px;
background: #ddd;
}
Updated booply
Like the title says, how do I set a bootstrap 3 container (wrapper) to 100% of the height of a browser window using a sticky footer?
BootPly
UPDATE:
the sticky footer works fine, it's the first '<div class="container">' that I need to be 100% height
You can set the page height to 100% and then put the footer at the bottom with a margin of it's height.
Like done here: http://getbootstrap.com/examples/sticky-footer-navbar/
Start by adding this to your css:
html {
position: relative;
min-height: 100%;
}
And for the footer add this
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #f5f5f5;
}
There is the simple solution for sticky footer when you know the height of the footer.
http://getbootstrap.com/examples/sticky-footer/
But when the footer height could change how can we solve the sticky footer
If you check the source code of the page you have mentioned, you will see there are actual comments telling you what to do to change the footer height:
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
/* Set the fixed height of the footer here */
height: 60px;
}
If you don't know the desired height of the footer remove "height: 60px" from .footer class. The footer height will now expand to fit its contents.
.footer {
position: absolute;
bottom: 0;
width: 100%;
background-color: #f5f5f5;
}
You will also need to dynamically set margin-bottom of body so it doesn't slide under the absolutely positioned footer. You can do this with javascript. Jquery example:
$(function(){
var footerHeight = $(".footer").height();
$("body").css("margin-bottom", footerHeight);
$(".footer").css("margin-top", -footerHeight);
});
Example here:
http://codepen.io/anon/pen/tFcJr
There are also 2 other ways to achieve a sticky footer.
Using tables: http://codepen.io/anon/pen/AlnHc
Using flexbox: http://codepen.io/anon/pen/qysLg. I'm not sure how either of these would play with bootstrap though and obviously flexbox is only supported by IE10+.
Here's the code from the bootstrap example:
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
You would change the height attribute...
.footer {
height: auto;
}
I got a div #header width: 1000px;
#header {
width: 1000px;
margin: auto;
height: 164px;
}
A div #main-container in full-width
#main-container {
height: 278px;
background: url(images/mainbg.png);
width: 100%;
}
But when I resize my window to a size less than 1000px setted on header, the #main-container creates a empty space.
http://tinypic.com/view.php?pic=1zcmmpf&s=5
I want to remove this space, and let the #main-container have full-width
What you are seeing is correct CSS behavior.
For example, consider your HMTL snippet:
<div id="header"></div>
<div id="main-container"></div>
with the following CSS:
body {
margin: 0;
}
#header {
width: 1000px;
margin: auto;
height: 164px;
background-color: yellow;
}
#main-container {
height: 278px;
background: pink url('http://placekitten.com/2000/278') top center no-repeat;
width: 100%;
}
See demo at: http://jsfiddle.net/audetwebdesign/5xwRu/
For pages wider than 1000px, your header is centered as you expect.
Your background image fills up width of the page because the #main-container has 100% width.
As you reduce the page width to less than 1000px, you will see a horizontal scrolling bar appear because the fixed width header is too wide to fit in the view port, which triggers
an overflow condition.
In this situation, the CSS engine creates some white space the right of #main-container since #main-container has a computed width less than 1000px and it fills up the view port width (which is less than 1000px), which does not include the space created for the overflowing content.
You can fix this a number of ways, but it depends in part on what you want to do.
You could set a minimum width as follows:
#main-container {
height: 278px;
background: pink url('http://placekitten.com/2000/278') top center no-repeat;
width: 100%;
min-width: 1000px;
}
See example 2 in the demo fiddle.
Note: You may have a wrapper container to which the CSS property overflow: hidden is applied. If this is the case you may not see a horizontal scrolling bar.