I'll trying to create website with horizontal scrolling.
But when I set element wider than viewport - body is do not wider.
Following code doesn't works
body {
float: left
}
How I can do body wider than viewport?
I create fiddle for this - https://jsfiddle.net/stas_webdev/9L1gLoww/
Update: I have a unknown num of .grid-cell blocks, in theory. So, I don't know, how wide should be body width in each case. It should be flexible.
If you have unknown number of cells then just add overflow property on your html, body. see below:
html, body {
position: relative;
height: 100%;
background: red;
overflow: auto;
}
To make your body wider, you can set its width attribute to something bigger than your viewport's width. For example:
body { width: 150%; }
This will take your viewport's width and make the body's width 50% bigger.
Related
So I'm trying to make "sections" with section that covers up the full height of the current page. Kind of like this. As you can see the width is set to 100. And heres my code
.cont{
background: #009dff;
height: 100%;
}
But for some reason it doesn't seem to work. Here's a demo. Any ideas?
This should do it.
http://jsbin.com/vijaxuyu/2/edit?html,css,output
html{
height:100%;
}
body{
height:100%;
}
section {
height: 100%;
}
The height % of html and body isn't by default 100%. Hence, you need to inform your browser explicitly. The reason why you have to specify height and sometimes min-height to html and body respectively is because neither element has any intrinsic height. Both are height: auto by default. It is the viewport that has 100% height, so height: 100% is taken from the viewport, then applied to body as a minimum to allow for scrolling of content.
This question already has answers here:
Make body have 100% of the browser height
(24 answers)
Closed 9 years ago.
I have been struggling to understand this scenario
I have set, in CSS
html, body {
min-height: 100%;
}
So that when there is no content on the page, the html and body take 100% of the height of page. And if there is content in body, these should change their height according to content height.
But when I add some content on the page (enough to display scroll bar), html and body are not taking 100% height of the document. i.e. if my screen height is 700px, in either case $('body').height() would return 700px;
Why is that?
EDIT:
In other words, I want my body Tag to be at least 100% of screen but it should grow if content is added.
I've misread the question at first, but on second thought I'd interpret it as:
The html element ignores min-height: 100%.
Why is that?
The answer to "Why" is in the relevant spec, emphasis mine:
min-height
...
Value: <length> | <percentage> | inherit
...
<percentage>
Specifies a percentage for determining the used value. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as '0' (for 'min-height') or 'none' (for 'max-height').
This is why you need to set a height for the html element for min-height to work on the body element. Alternatively you can position the html element absolutely, like this:
html { border: 10px solid black }
body { border: 10px dashed red }
html { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
/* alternatively: html { min-height: 100%; height: 100%; } */
html { min-height: 100%; }
body { min-height: 100%; }
See the position: absolute demo or the height: 100% demo.
Thanks to #Alohci for correcting me on the interpretation of the spec.
In the case you describe, html and body do take up 100% of the screen height. Add a background-color to see this:
body {
background-color: lightblue;
}
You'll see the entire screen is now coloured. The jquery statement you're getting .height() from is still only returning the height of the content, not being stretched to the height of the screen. When you have a scrollbar, .height() of body will return the height of all the content, not just the visible area. You can get the height of the window with $(window).height(). See this fiddle for a demo.
I would like one div in my web page to take up the whole area of the screen - vertically and horizontally.
There will be more divs below it.
I got the horizontal part, but I'm not sure how to do the vertical part.
This website does it to an extent: http://ournameismud.co.uk/#
Try setting the height of the html and body to 100% and then your div to 100% as well.
For Example
html, body {
height: 100%
padding: 0;
margin: 0;
}
#my-div {
width: 100%;
height: 100%;
}
Edit: Forgot to set margin and padding to 0.
I have a footer i created for a website, but for some reason when i change the width of the window the background image seems to just disappear throughout the right side as i'm shrinking the width of the window.
The footer is supposed to stretch 100% accross the bottom of the screen and does so until i start shrinking the width of the window to a certain point.
You can see an example of my issue Here
Any ideas how to fix this? I am totally stumped. Maybe i did something wrong with width?
The width of #footer is set to auto, and the content within (#content-wrapper) has a fixed width.
This is causing the horizontal bars to appear.
To solve this, you can set overflow:hidden to the parent div (#footer).
Try this:
#footer {
background-image: url("images/footer-bg.png");
background-repeat: repeat-x;
height: 451px;
margin: auto 0;
width: 100%;
overflow: hidden; //What you're looking for.
}
If you also want the inner div (#content-wrapper) to dynamically resize itself, use a percentage, instead of a pixel dimension for width:
#footer #content-wrapper {
height: 451px;
margin: auto;
width: 83%;
}
Hi i have check to your demo page you have define your footer width 1265px and now
than your define min width your html or body as like this
body, html {
min-width: 1265px;
}
because your max width is 1265 define to your footer so that you define same width your body or html
I'm trying to get a simple solution for this layout.
This is the simplified html.
<div class='wrapper'>
<div class='header'></div>
<div class='middle'> TEXT </div>
<div class='footer'></div>
</div>
Header and footer have a fixed height in pixels.
middle can have a variable height, depending on the content.
I want wrapper to have a minimum height of 100%. So if the text inside middle is small, the middle div should expand to fill the browser page. And if it's too long, the whole page should be scrollable.
Is this possible easily? Maybe changing something in the layout?
here's your solution: http://jsfiddle.net/S4akv/1/
You do NOT want to set a hard height for the .middle. If your content is only a few lines then you will end up with scrollbars where none are needed.
With a header and footer, you also don't want height: 100% on your .middle class because it will push your footer down, forcing a scrollbar no matter what. You also don't want a clear-cut height:100% because most browsers will interpret this as 100% of the browser height, so when you resize your browser to be larger, either the height won't change or the footer won't move.
The best solution here is to have your wrapper and any associating backgrounds attached to that. Depending on the content within your .middle div this answer could change, but given the simple parameters this is the most elegant way to do it.
the secret is to make sure that all containing elements have a height set. reason being, any block element with height: 100% will only be 100% of the area containing it. in this case you need to set height for middle, wrapper and body, html
body,html { height: 100%; margin:0; padding:0; }
.wrapper { min-height: 100%; width: 100%; background-color: red; position:relative; padding-bottom: 200px; }
.header { height: 200px; width: 100%; background-color: blue; }
.middle { }
.footer { height: 200px; width: 100%; background-color: green; position:absolute; bottom: 0; }
If you have nested content within .middle that also needs to be 100% height there is a better way, using a combination of height, absolute positioning and negative margins. There are a million ways to skin a cat. Well, a handful at least :)
edited to add padding to .wrapper to make room for footer. The bottom padding of wrapper must be the same height as the footer