This question already has answers here:
CSS: Width in percentage and Borders
(5 answers)
Closed 2 years ago.
This question is everywhere and the solution is always the same but it never works for me and I have no idea why! I simply need my div to fill the entire view port without creating a scroll bar. Who knew this would be so difficult. Everyone says to just set body and html margins to zero but this doesn't work. I still have a vertical scroll bar! I'm getting really frustrated and I would really appreciate some help. Here is the JSFiddle https://jsfiddle.net/davdarobis/d3k4hv6q/23/.
body, html {
height: 100%;
width: 100%;
position: absolute;
margin: 0;
}
#content
{
height: 100%;
border: solid blue 5px;
margin: 0;
}
#heading {
height: 40%;
border: solid red 5px;
}
img {
height: 100%;
}
<body>
<div id="content">
<div id="heading">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png" alt="" class="image">
</div>
</div>
</body>
I can't use the top: 0 bottom: 0 solution because this seems to screw up the height: 100% property of its children. I'm completely stuck. Any ideas? Thanks.
Apply the property box-sizing: border-box; to all of your elements (selector *) so the extra space caused by borders, padding, and margins is then included in the 100% and not added to the 100% (i.e. 100% + 5px border).
* {
box-sizing: border-box;
}
body, html {
height: 100%;
width: 100%;
position: absolute;
margin: 0;
}
#content
{
height: 100%;
border: solid blue 5px;
margin: 0;
}
#heading {
height: 40%;
border: solid red 5px;
}
img {
height: 100%;
}
<body>
<div id="content">
<div id="heading">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png" alt="" class="image">
</div>
</div>
</body>
the border: solid blue 5px; is causing the scroll bar to appear.
It ends up having 10px more height than the parent element "body" (5px bottom +5px
top).
if you really need a border, you subtract it from the 100%.
Try to add to html tag an overflow property like so:
body, html {
height: 100%;
width: 100%;
position: absolute;
margin: 0;
overflow-y: hidden;
}
Try to use 100vh in place of 100% for height and also set box-sizing:border-box; for all elements, I have made some changes to the css, please check if it works
*{
box-sizing:border-box;
}
body, html {
height: 100vh;
width: 100%;
margin: 0;
overflow:hidden;
}
#content
{
height: 100vh;
border: solid blue 5px;
margin: 0;
}
#heading {
height: 40%;
border: solid red 5px;
}
img {
height: 100%;
}
Hope it works.
Add this line on top of your css, that should prevent scrolling
* {
box-sizing: border-box;
}
Related
I have two divs. outer div taking 25%. And the inner div is placed at the bottom (position: fixed; bottom: 0; width: 25%; border-top: 1px solid red) But this is not taking 25%.
I am adding border for this div. So there is an white space is showing because of the width.
HTML:
<div id="main-div">
<div id="outer-div">
<div id="div-1"></div>
<div id="div-2">
<div id="inner-div"></div>
</div>
</div>
</div>
CSS:
#main-div{
height: 100%;
width: 100%;
display: table;
}
#outer-div {
width: 100%;
}
#div-1, #div-2 {
width: 100%;
}
#inner-div {
position: fixed;
bottom: 0; width: 25%;
border-top: 1px solid red;
}
How to apply exactly apply 25% width to inner-div which has position fixed ?
UPDATE Added js fiddle in comment
Remove your body margin . This issue because of you don't remove your body margin you can simply fix this
body {
margin:0;
}
body {
margin:0;
}
#main-div{
height: 100%;
width: 100%;
display: table;
}
#outer-div {
width: 100%;
}
#div-1, #div-2 {
width: 100%;
}
#inner-div {
position: fixed;
bottom: 0; width: 25%;
border-top: 1px solid red;
}
<body>
<div id="main-div">
<div id="outer-div">
<div id="div-1"></div>
<div id="div-2">
<div id="inner-div"></div>
</div>
</div>
</div>
</body>
The real reason why inner-div has more width than outer-div is because inner-div has position: fixed applied to it.
Now when you apply position: fixed, it makes the element position relative to the viewport.
So, in this case inner-div is relative to the body which has some user-agent margin styles applied. To make them have same width apply margin: 0 to the body.
Also, apply box-sizing: border-box to outer-div to exclude the border in the width.
I have updated the fiddle for you. So both divs have the same width.
https://jsfiddle.net/nashcheez/uur2h5w3/4/
Fixed position is relative to the browser window hence percentage values will be relative to the <html> element (http://www.w3schools.com/cssref/pr_class_position.asp). Although experimental position:sticky might accomplish what you need since it is relative to the viewport (parent relative element).
You can use below css for this
#inner-div {
box-sizing: border-box;
}
You can check updated fiddle
You need to reset body for browser. For this reason "inner-div" is taking space.
body{margin:0;padding:0;}
body{margin:0;padding:0;}
#main-div{
height: 100%;
width: 100%;
display: table;
background: blue none repeat scroll 0 0;
border: 1px solid blue;
}
#outer-div {
width: 25%;
border: 1px solid green;
}
#div-1 {
width: 100%;
}
#div-2 {
display: table;
height: 0;
padding-right: 2px;
width: 100%;
}
#inner-div {
text-align: center;
position: fixed;
bottom: 0;
width: 25%;
border-top: 1px solid red;
padding-bottom: 27px;
padding-top: 10px;
}
<div id="main-div">
<div id="outer-div"> //list
<div id="div-1"> //parent-scrol
<div id="div-2"> //scroll
<div id="div-3"> //inner-list
<div id="inner-div">wefffef</div> //create-new
</div>
</div>
</div>
</div>
</div>
I'm trying to go with the css-only approach to this issue and not to use margin-left to move the <div class="fd"></div> from <div class="sb"></div>
I've ran out of the idea-fuel what to try. I've nested some wrappers and used different kinds of positionings (this is not a typo nor French, spell-checker excuse me) but nothing has worked out so far.
Issue: Making a fixed div as solid element, to accept the .fd element on it's right side.
.fd holds content which is going to exceed the height of the page.
.sb holds side-content which is going to remain as 100% in height.
See snippet for a clear example what I've been struggling with.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.sb {
height: 100%;
width: 300px;
background: blue;
position: fixed;
opacity: 0.5;
}
.fd {
min-height: 100%;
background-color: red;
display: inline; /* Won't apply to fixed? block will overlap everything */
}
<div class="sb"></div>
<div class="fd">
<p>Am I out in the open?</p>
</div>
Added an extra .wrap.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrap{
padding-left: 300px;
}
.sb {
height: 100%;
width: 300px;
background: blue;
margin-left: -300px;
position: fixed;
opacity: 0.5;
}
.fd {
min-height: 100%;
background-color: red;
display: inline; /* Won't apply to fixed? block will overlap everything */
}
<div class="wrap" id="wrap">
<div class="sb"></div>
<div class="fd">
<p>Am I out in the open?</p>
</div>
</div>
https://jsfiddle.net/afelixj/tb3pbam9/
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.
I have something akin to the following structure:
<html>
<body>
<div>
</div>
</body>
</html>
I want the inner div to occupy the full vertical height of the page except for an 8px margin from top and bottom. I also want this div to be centered horizontally within the body with a minimum margin of 8px from left and right. I do not want the page to scroll and need to avoid using calc() at all costs for browser support-ability.
I have tried:
html, body{
height: 100%;
}
div {
position: absolute;
top: 8px;
bottom: 8px;
}
Which is fine for forcing it to leave an 8px "margin", but centering it horizontally now becomes impossible without using a calc() since its width is variable and there are no elements for it to be relative to.
I hope I understand your question right... you want the div to fill the whole window, except for 8px... Is that right?
You can do that using this CSS:
div {
background: lightblue;
position: absolute;
top: 8px;
left: 8px;
bottom: 8px;
right: 8px;
}
Check the demo.
[OPTION 2]
If you want the div to have a fixed width (or semi-fixed with max-width or min-width) you can use this code:
html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
padding: 8px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
div {
background: lightblue;
width: 300px;
margin: 0 auto;
height: 100%;
}
It says the body to be 100% height and width and calculate the padding within it's width (therefor the box-sizing) property. Then you can specify the width on the div, and center it by using margin: 0 auto.
Check the updated demo.
div{
display: block;
margin-left: auto;
margin-right: auto;
}
centered div
UPDATE: remove position: absolute;
FIDDLE
You can use margin:
div {
margin: 0 auto;
}
I think it's best to introduce a new div:
<body>
<div class="container">
<div class="center"></div>
</div>
</body>
Then in your CSS you could do this:
.container {
position: absolute;
top: 8px;
bottom: 8px;
left: 0;
right: 0;
}
.center {
margin: 0 auto;
}
http://jsfiddle.net/5X79H/1/
following code will center your div:
<body>
<div class="container">
<div class="center"></div>
</div>
</body>
style:
.center {
margin-left: auto;
margin-right: auto;
display: inline-block;
background-color:maroon;
width:100px;
height: 100px;
}
.container{
width:100%;
text-align: center;
}
First off, similar but never answered questions:
vertically-scrolling-percentage-based-heights-vertical-margins-codepen-exampl
scroll-bar-on-div-with-overflowauto-and-percentage-height
I have an issue with scrolling a center part of the web page while its height needs to be auto.
Here is a fiddle
The header needs to be on top at all times, meaning I don't want the body to become larger than 100%.
However the div #messages can become larger, and that div needs to scroll on its own.
The #messages has a margin-bottom to leave room for the fixed bottom div.
I tried making the div #messages with box-sizing: border-box; and making it height:100% and padding to keep it in place but this was a really nasty looking solution and the scroll bar was the full page height instead of only the inner part.
Any help would be greatly appreciated.
You want something like This
Or maybe - his big brother..
Pure CSS solution, without fixing any height.
HTML:
<div class="Container">
<div class="First">
</div>
<div class="Second">
<div class="Content">
</div>
</div>
</div>
CSS:
*
{
margin: 0;
padding: 0;
}
html, body, .Container
{
height: 100%;
}
.Container:before
{
content: '';
height: 100%;
float: left;
}
.First
{
/*for demonstration only*/
background-color: #bf5b5b;
}
.Second
{
position: relative;
z-index: 1;
/*for demonstration only*/
background-color: #6ea364;
}
.Second:after
{
content: '';
clear: both;
display: block;
}
.Content
{
position: absolute;
width: 100%;
height: 100%;
overflow: auto;
}
You could try the following.
You HTML is:
<div id="container">
<div id="header">The header...</div>
<div id="content">
<div id="messages">
<div class="message">example</div>
...
<div class="message">example</div>
</div>
<div id="input">
<div class="spacer">
<input type="text" />
</div>
</div>
</div>
</div>
Apply the following CSS:
html, body {
height: 100%;
}
body {
margin:0;
}
#header {
background:#333;
height: 50px;
position: fixed;
top: 0;
width: 100%;
}
#content {
position: absolute;
top: 50px;
left: 0;
right: 0;
bottom: 45px;
overflow-y: scroll;
}
#messages {
overflow: auto;
}
#messages .message {
height: 79px;
background: #999;
border-bottom: 1px solid #000;
}
#input {
position:fixed;
bottom:0;
left:0;
width:100%;
height: 45px;
}
#input .spacer {
padding: 5px;
}
#input input {
width: 100%;
height: 33px;
font-size: 20px;
line-height: 33px;
border: 1px solid #333;
text-indent: 5px;
color: #222;
margin: 0;
padding: 0;
}
See demo at: http://jsfiddle.net/audetwebdesign/5Y8gq/
First, set the height of 100% to the html and body tags, which allows you to reference the view port height.
You want the #header to be fixed towards the top of the page using position: fixed, similarly for your footer #input.
The key is to use absolute positioning on #content to stretch it between the bottom edge of the header and the top edge of the footer, and then apply overflow-y: scroll to allow it to scroll the content (list of messages).
Comment
The source code for the #input block may be placed outside of the #content block.