Im trying to resize jumbotron so that it fills the entire screen. Basic site, just a row of nav pills with 1 giant jumbotron under it. I have only been able to find info on changing the width of a jumbotron
Yes, it's possible to change the height of a jumbotron. In the css of your code for jumbotron like chdltest said:
"Apply a height of 100% to the jumbotron, it's containers, body, and html"
The code for this should be something along these lines:
.jumbotron, body, html {
height: 100%;
width: 100%
}
This makes the height and width 100% for the jumbotron (if it's a class, if it's an id #jumbotron), body and html. Though keep in mind this needs to go after the declaration already of the height and width for your jumbotron, body and HTML. Though I'm assuming your linking this all to a separate css file.
Another similar question though not specific to the jumbotron was Make div 100% height of browser window. In the answer to this question it goes into viewports as an alternative to using the height:100%;, James goes into height:100vh;, which could be another alternative.
Apply a height of 100% to the jumbotron, its containers, body, and html.
Giving a height of 100% to only the jumbotron will only tell the jumbotron to have the height of its container (which I don't know what your structure is like because you did not provide anything other than a question).
Applying a height of 100% to its containers as well as to the body and height will enable it to be the full height of your screen.
Related
I was looking at this code and there is something I don't understand. You can live preview this website.
My question is : How is the height of the "Download" section (All the buzz, the yellow one) set ?
I looked in the css but didn't find anything relative to the height of this section.
Also I know that it's a pattern in the header but is there a trick to make the background-image not to move when resizing the page? (Like it does with the pattern ? Cropped)
Thank you
The height isn't really set. The height is coming from the size of the content plus padding: 150px 0; set on the container. So the height is content plus 150px top and bottom padding.
How do I get rid of the white space on either side of my website?
I want the backgound to be flexible to fit the browser window for whatever size it is. I think I need to resize the div container but I'm having lots of trouble.
http://www.dropshiplounge.com/
Your website was built using a fixed width and a margin that aligns it in the middle of the page using this rule in your css.
margin:0 auto;
Everything within your site has been built to within the specification of your wrapper width. Most responsive sites still have a page wrapper and a maximum width. If it's the white space that bothers set a background to the body element
body{background:color;}
or for an image
body{background-image:url('background_image_url')}
While im not the biggest fan of W3C refer to this for more information if you get stuck - http://www.w3schools.com/css/css_background.asp
If you are concerned that your site doesn't respond to different screen sizes and browser resizing then consider hiring a professional to redesign your site for responsive design.
Is this fiddle more or less what you're looking for?
I removed the hard-coded width on global_container_ and set width: 100%; on the header, along with repeat-x for the header background. I removed float: left; from the header and it's child elements, and made sure the child elements had left- and right-margins of auto. I also removed the hard-coded width from the headline, but you'll have to move the bottomline outside of it's container if you want that full-width as well (or remove the hard-coded width from the container).
Also, I don't think I had to change this in the fiddle, but you may need to remove the clearfix class from global_container_, or set it to display: block; in order for the full width to take effect.
It's the same idea for the footer - set it to width: 100%; and adjust the footer and child elements' padding and margin until they're placed where you want them.
There's lots of questions on SO related to this, but the ones I scanned are all for detailed specific situations. What I want to know is, at a conceptual level, what does it mean to say:
<div style='height:100%'>
How high is 100%? 100% of what?
[EDIT]
Followup question: If 100% represents the height of the parent, but the parent is <body> and has no height other than the height of the div, then what does it mean? It seems recursively defined.
100% of the parent container's height.
See here: http://jsfiddle.net/6VRn6/
If you want to use this method to make the div 100% of the page's height, you have to specify the height as 100% of the body and html as well.
body, html {
height: 100%;
}
When you don't specify a html or body height, their heights are the sum of the heights of the elements in it.
Updated demo showing this. We have a 200px div with 2px borders totaling 204px and then a 40px status div. The body height should be 244px. Now, if you add the CSS above to the page, the height will be the height of the bottom right quadrant of the jsfiddle. Try adding it and running the code again. Then resize the result pane and run it again to see the height change accordingly.
100% of the offsetParent. In most cases, that's the document. It can also be an element with position other than static, or a component of a table.
The height:100% means :
Make that div big as the parent!
It just means 100% of the div or class or tag it is enclosed within. Try having an idea somewhat this:
{--parent loop
{
..height 100% of above loop
..
}
}
I have set the body and html to height:100% and I have set the element to Height:100% and the div is only contained in html and body, nowhere else.
Yet when displaying the element is 100% of the browser window height not the site height which is scrollable. I'm sure the answer is simple but I can't think of a reason why it is like that :/
You set the body height to 100% of the screen height, which is why it won't scroll.
The inner element at 100% will inherit 100% of the screen size.
try removing the height of the body and use px for the element until you develop more content on the site.
If you are still looking (or more likely, somebody has found this via google), I achieved what I think you are after here:
http://www.facebookanswers.co.uk/code/fullheight/demo2.htm
Its a self contained file, IE all the CSS is there with the markup, so you should be able to see what is going on.
The full article is here:
http://facebookanswers.co.uk/?p=312
Basically, its a layout where the footer stays at the bottom of the window (thanks to the 100% div) until the content is more than the window, in which case it scrolls with the content.
Whenever my website is viewed with a resolution that is insufficient to display the full page, a horizontal scrollbar is added. The problem is that my 100% width div with background image does not apply this background image to the portion that extends beyond the scroll bar.
This same issue is actually appears here on Stack Overflow as well. If you shrink your window small enough that you have a horizontal scrollbar, you can see that both the header and footer div areas do not extend the background image/color.
One way I have figured to resolve this is to set the header/footer div to fixed but then the content past the end of the div is lost :-(
Anyone have any suggestions or a workaround? ty!
When you set an element to 100% width it will have the same width as its parent element. The body tag's width defaults to the width of the viewport. According to the standard, when an elements contents is to big to fit in it, it will overflow. This is what you're seeing.
To get around this, set the min-width on the body tag. Something like the following, obviously change the width to whatever works for you:
body {
min-width: 960px;
}
Surly if you used something along the lines of
body{
background: url("yourdir/yourimage.jpg") repeat repeat;
}
Instead of having a background div? It'd be helpful if you also added the code for the background div
This margin is a browser scrollbar that appears during resizing and makes viewport smaller. This can be easily fixed by adding hidden overflow to body. Check #242684