This question already has answers here:
How to make a div 100% height of the browser window
(39 answers)
Closed 4 years ago.
I am trying to make a scrollable div box, and it's height should be exact fit to screen's height(100%).
The problem is if there is a another div box on the top which is the fixed height, how do I make scrollable box to fit to the screen's height?
This is what I tried
<div class="wrap">
<div class="top">
Fixed height 100px. No floating or layered box
</div>
<div class="scrollBox">
Fluid height to screen height 100%
<br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br>
</div>
</div>
html, body { height:100%; margin:0; padding:0; }
.wrap { height:100%; background:lightblue }
.top { height:100px; background:green}
.scrollBox { width:80%; height:100%; margin:0 auto 0 auto; border:1px solid #000; overflow-y:auto; background:#eee; }
This is my demo here
http://jsfiddle.net/a5ktensk/77/
Please help
You can use the vh unit to achieve this.
So
.scrollBox {height: 100vh; }
vh means viewheight, so will be the current height shown, you can take a little away using the calc feature in CSS
.scrollBox {height: calc(100vh - 100px);
So that will be 100% of the hieght minus 100px for example if you want a fixed div at the top :)
http://jsfiddle.net/g7d2k59m/1/
I think there calc() function will be handy, try following way:
.scrollBox {
width:80%;
height:calc(100% - 100px); /* Key Line */
margin:0 auto 0 auto;
border:1px solid #000;
overflow-y:auto; background:#eee;
}
Apply height: 100vh; overflow: hidden; to .wrap.
Height in vh will force page to use full height as per viewport.
Viewport Height (vh) – A percentage of the full viewport height. 10vh
will resolve to 10% of the current viewport height.
Overflow:hidden will stop .wrap from scrolling.
html, body { height:100%; margin:0; padding:0; }
.wrap { height:100%; background:lightblue;height: 100vh;overflow: hidden; }
.top { height:100px; background:green}
.scrollBox { width:80%; height:100%; margin:0 auto 0 auto; border:1px solid #000; overflow-y:auto; background:#eee; }
<div class="wrap">
<div class="top">
Fixed height 100px. No floating or layered box
</div>
<div class="scrollBox">
Fluid height to screen height 100%
<br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br>
</div>
</div>
To know more about viewport units -
https://css-tricks.com/fun-viewport-units/
https://www.w3schools.com/cssref/css_units.asp
Hope this helps :)
Related
I'm trying to center an image in a div I created. What am I missing here? I tried putting a style on the image, but that didn't work either.
http://jsfiddle.net/huskydawgs/8zs29/
<div class="wrapper-data">
<div class="data_row">
<div class="data_cell1_100">
<img width="450" height="509" src="http://oedblog.electricstudiolt.netdna-cdn.com/wpcms/wp-content/uploads/apple-e1382039006457.jpg" /></div>
</div>
.wrapper-data {
position:relative;
width:100%;
border: none;
margin: 30px 0 0 0;
overflow: hidden;
}
.data_row {
height:100%;
min-height:100%;
white-space:nowrap;
display:table;
}
.data_cell1_100 {
width:100%;
display:table-cell;
white-space:normal;
}
.data_cell1_100 img {
display:block;
margin: 0 auto;
}
.data_row also needs width:100%;
DEMO http://jsfiddle.net/8zs29/1/
Reason: Short and friendly, percentage width is relative to the parent element, you need to "pass it along" to your destination element. So if you intend to have the 100% width of the outer most element, in your case all of the width of the body with the 100% of the viewport, then all of the preceding elements should have the 100% width.
add width:100%; to div with the class .data_row
I'm trying to create a div (topbar) (width = 100%;). Below that I want my maincontent in a div with my maincontent. This needs to be 600px in width and centeret in the screen.
Normally I would set body width = 600px and margin: auto, but then my topbar is shortened.
Whats the easiest way to do this?
There is no need to touch the width of the body element
#topbar {
width:100%;
height: 150px; // Whatever height you want
}
#mainContent {
width: 600px;
margin: 0 auto; // Center on the screen
}
If I understand correctly, you want #topbar to extend 100% of the width of the page which it is not currently doing if the browser window is less than 600px... because #maincontent pushes the page out past 600px?
I believe you will need to have a body { min-width:600px; } to force topbar to 600px if the page is less than 600px wide.
Here's a fiddle of a potential solution: http://jsfiddle.net/z2dEK/1/
And here's the CSS:
body {
background:#ccc;
min-width:600px;
}
#topbar {
background:#000;
height:100px;
width:100%;
}
#maincontent {
background:#fff;
margin:auto;
width:600px;
height:100px;
}
I have tried on my own for such a long time and all the posts I have read and googled so far have not helped me, so I hope one of you guys can give me a hint:
I have a Layout consisting of a header, a footer, and a content. This layout streches over the whole page in height (which has already taken me a while to figure out). So far, so good. But now I want to stretch the content-div as far down as possible, down to the beginning of the footer. No matter what I do, it does not work, it either stays the length of the text in it, or it becomes the size of the whole window, hiding the footer and generating a scrollbar.
I read about a solution making it position:absolute, but I don't want that.
Here is the example: http://jsfiddle.net/N9Gjf/1/
You would really help me out!
Here is the css:
html, body {
height:100%;
text-align:center;
}
#wrapper {
min-height:100%;
height:100%
overflow: hidden;
width:800px;
margin: 0 auto;
text-align: left;
background-color:lightblue;
}
#footer {
background-color: silver;
height:1.5em;
width:800px;
margin: -1.5em auto;
}
#header {
background-color: orange;
height:100px;
}
#content {
background-color: limegreen;
}
* {
margin:0;
padding:0;
}
And here is the html:
<div id="wrapper">
<div id="header">
<p>Header</p>
</div>
<div id="content">
INHALT
</div>
</div>
<div id="footer">
<p>Footer</p>
</div>
http://jsfiddle.net/calder12/CprV7/
You had a missing semi-colon after height in the wrapper. You want to set the height and min-height of the content to 100% as well.
#wrapper {
min-height:100%;
height:100%;
overflow: hidden;
width:800px;
margin: 0 auto;
text-align: left;
background-color:lightblue;
}
#content {
background-color: limegreen;
height:100%;
min-height:100%;
}
I think relative-absolute positioning is the best solution (I admit I am unable to find a way to make the heights sum up to 100%). Here is what you need to do:
Demo #1
Make the wrapper position relative
Put all divs inside the wrapper
Use absolute positioning to position and size content and footer; use one of the following:
Do not specify height of the div; specify top and bottom
Specify either top or bottom but not both; specify height
Alternate method is to use negative margins. This could be a brain twister but once you grasp the idea it becomes mush simpler than positioning. Here is what you need to do:
Demo #2
Assign heights to header and footer
Assign 100% height to content
Use negative margins on content so that (i) content pushes itself over the header (ii) pulls footer over itself
Use z-index positioning to bring header in "front" of content
Use a padding div to push the stuff inside the content div below the header
#wrapper {
min-height:100%;
height:100%; /*missed the semicolon here*/
overflow: hidden;
width:800px;
margin: 0 auto;
text-align: left;
background-color:lightblue; position:relative
}
Now it works DEMO
You have an error with the wrapper:
#wrapper {
min-height:100%;
height:100%;
overflow: hidden;
width:800px;
margin: 0 auto;
text-align: left;
background-color:lightblue;
}
You forgot to put a ; at the end of height:100%.
Try it and you will see that it will work
In my site design, I need to have a div centered on the page 1280 pixels wide.
The content within the div will be centered and 960px wide to accomodate most browser sizes.
I need the extra width on the outer div to have hidden overflow on the left/right sides evenly so that the div spills outside the viewing window as the browser is resized/gets smaller.
The layout is currently similar to this:
<div> //outer div: width 100%
<div> //inner div: width 1280 pixels wide with background
<div> //centered content: 960px wide
</div>
</div>
In the image above, the darker blue is 1280px wide. The lighter blue is 960px wide, centered on page.
I need the darker blue to overflow(hidden) off of both sides of the screen when the browser is resized..eventually leaving only the lighter blue centered before a horizontal scroll bar appears.
Any ideas?
EDIT
My current problem is that the outer 1280px div will not overflow properly causing the center div to come off of center.
Fiddle
http://jsfiddle.net/tKtwg/1/
In the fiddle above, you can see that the outer div does not overflow evenly when you decrease the window size.
Edit 2
What I want to avoid is the horizontal scroll bar appearing until the 960 wide div is reached. Sorry I should have been more clear
body
{
background-color: #00a2e8;
width: 100%;
}
.content
{
background-color: #99d9ea;
width: 960px;
margin: 0 auto;
min-height: 1000px
}
Check this in your browser and this will be at the center and you don't have to specify negative left margin.
You can change the widths according to your needs and it will be displayed in the center.
<html>
<head></head>
<style type="text/css">
body{margin-top:0;}
.Main{
width:100%;
background-color:blue;
margin-top:0;
}
.Outerdiv{
background-color:orange;
margin-top:0;
margin-left:auto;
margin-right:auto;
width:1024px;
height:500px;
}
.Innerdiv{
background-color:green;
margin-left:auto;
margin-right:auto;
width:960px;
height:200px;
}
</style>
<body>
<div class="Main">
<div class="Outerdiv">
<div class="Innerdiv">
<p></p>
</div>
</div>
</body>
</html>
margin:auto; will not always center the content. Explicitly mentioning the values of left margin and right margin to auto then they will be displayed in the center.
How's this? http://jsfiddle.net/JGJBG/2/
.main{width: 100%; background-color:red; overflow: hidden; height: 100%;}
.outer
{
width:1280px;
background-color:aqua;
position: absolute;
left: 50%;
margin-left: -640px;
min-height: 100%;
}
.center
{
width:960px;
position:absolute;
left: 50%;
margin-left: -480px;
background-color: blue;
min-height: 100%;
}
Here is the HTML Code:
<div id="header">
</div>
<div id="container">
<div id="leftbar">
</div>
<div id="content">
</div>
</div>
<div id="footer">
</div>
And here is what I want to achieved, even though it's not valid CSS, but I think you will understand my point:
html,body
{
min-width:800px;
max-width:1680px;
width:100%;
height:100%
}
#header
{
width:100%;
height:100px;
background:#CCCCCC url(images/header_bg.gif) repeat-x;
}
#footer
{
width:100%;
height:10px;
}
#container
{
width:100%;
height:100%-100px-10px; /* I want #container to take all the screen height left */
}
#leftbar /*fixed width, the height is always the same as the screen height*/
{
height:100%;
width:200px;
}
#content
{
height:100%;
width:100%-200px; /* take all the screen width left except the leftbar */
overflow:auto;
}
Someone just put this as an example:
http://limpid.nl/lab/css/fixed/header-and-footer
I do not think using <body>padding to exclude the header and footer is a good way to go, because I would like all the scroll bars appear inside the div#content, not for the whole <body> tag.
The normal width of a block element is 100% so all you should need to do is add a margin as appropriate. If I'm understanding your question properly.
Have you considered using position:fixed for the framework elements? Or are you stuck supporing IE6?
the horizontal bit can be achieved quite easily
#content {margin-left:200px;}
#left-bar {float-left;width:100px;}
The vertical bit is trickier as there is no vertical equivalent of float. A close approximation that might work is:
html,body
{
min-width:800px;
max-width:1680px;
width:100%;
height:100%
}
#header
{
width:100%;
height:100px;
background:#CCCCCC url(images/header_bg.gif) repeat-x;
position:absolute;
top:0;
left:0;
}
#footer
{
width:100%;
height:10px;
position:absolute;
bottom:0;
left:0;
}
#container
{
width:100%;
height:100%;
margin-top:100px;
margin-bottom:10px;
}
#leftbar
{
height:100%;
width:200px;
float:left;
}
#content
{
height:100%;
margin-left:200px;
overflow:auto;
}
You could use calc(), e.g.:
#container {
...
height: calc(100% - 100px - 10px);
}
And you could either use margins or fixed positioning to set the position of it to between the header and footer.
As for the scrollbars, just apply overflow: hidden to body and div#container and apply overflow: auto to div#content.