This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Fill remaining vertical space with CSS using display:flex
(6 answers)
Closed 2 years ago.
I created an empty react project and I only added a materializecss for styles.
<div className="App">
<header>
<nav/>
</header>
<div className="row category__list" />
<footer className="page-footer">
<div className="footer-copyright" />
</footer>
</div>
I added a styles for my blocks.
.App {
height: 100vh;
}
.category__list {
margin: 0;
height: 100%;
}
.page-footer {
padding: 0;
}
Why my block App and the block category__list have the same height? And I have a scroll and my footer not see without use the scroll.
As I see it, the category__list block should set all free space and my footer haven't to be outside the display.
For example
http://jsfiddle.net/MegaRoks/g4ruz53p/10/
That's because you have given your .App a full screen height (100vh) and made your category__list again 100% height. So your footer resides below it. This is why you get the scroll.
If you need your app to be full screen height then maybe this will help you.
.App {
height: 100vh;
}
.category__list {
margin: 0;
height: calc(100% - 150px); /* footer height reduced from full height*/
}
.page-footer {
padding: 0;
height: 150px;
}
Related
This question already has answers here:
Why does this page scroll?
(1 answer)
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 5 months ago.
I somehow lost track of what I am doing wrong here:
I got a simple content <div>.
it has a height of 100% - 30px and a margin-top of 30px, ...so together they add up to 100% of the parent elements height.
the parent element is the body with height set to 100vh. No margins, no paddings.
However I do still get a y-scroll bar on the right. Can anyone explain to me, why that is?
I put a minimal example here to show what I mean:
https://jsfiddle.net/kemo8npa/4/
Can someone explain to me, why i get the scrollbar?
html {
margin: 0;
padding: 0;
}
body {
height: 100vh;
margin: 0;
padding: 0;
background-color: purple;
}
.content {
height: calc(100% - 30px);
margin-top: 30px;
background-color: blue;
width: 300px;
}
<div class="content">
content
</div>
edit: changed example to be more minimal.
The margin-top of .inner adds 30px outside of the element, so the sum is 100% height again.
You could use padding-top instead.
This question already has answers here:
Why is percentage height not working on my div? [duplicate]
(2 answers)
Closed 1 year ago.
For example, in the fiddle below, I have a single flex div.
It appears that setting the height to 100% has no effect on the div.
A div is display block by default and takes up 100% of the width. But obviously the height behaves differently.
https://jsfiddle.net/02wtuzjp/1/
#expand{
display: flex;
height: 100%;
border: 1px solid red;
}
<div id = 'expand'>
</div>
This appears to be expected behavior as there is not content in the div.
https://css-tricks.com/almanac/properties/h/height/
One solution is to use the units vh or more particularly 100vh.
I'm not sure it this is the proper or best way, however.
An element with a percentage based height, needs a parent reference for it to base its height on. You can add:
html, body {
height: 100%;
}
And your element will be 100% of the height:
html,
body {
height: 100%;
}
#expand {
display: flex;
height: 100%;
border: 1px solid red;
}
<div id="expand">
</div>
Per your edit:
You can certainly use 100vh to set the height, but then that element will always be 100 percent of the height of the viewport..no matter it's containing element.
For example:
#random {
height: 50px;
}
#expand {
display: flex;
height: 100vh;
border: 1px solid red;
}
<div id="random">
</div>
<div id="expand">
</div>
You can see that the height of your expand element is 100vh tall and creates a scroll because the height is the height of viewport, not the remaining space.
Resources:
Article on Medium
This question already has answers here:
Display a div width 100% with margins
(6 answers)
Closed 2 years ago.
I have body set to width 100%, height 100% but when I add a header with 100% width and margin-left and margin-right the header is taking 100% width plus margin-left and margin-right value but I want to have margin-left and margin-right value included within 100% of the width of header without causing horizontal scrolling to the body how do I do it?
here is code :
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
header {
width: 100%;
height: 70px;
margin-left: 30px;
margin-right: 30px;
border: 1px solid red;
}
<header></header>
Basically is this problem of box-sizing?? I'm using the next.js react framework. I want the total value of width calculated for a header that is 100% to include margin-left and margin-right value such that the header is in middle with margin-left and margin-right and not causing a horizontal scrollbar
Add this to your CSS, it should solve your problem.
html, body, *{
box-sizing: border-box;
}
Edit:
If this doesn't help use
max-width: 100%;
worked for me. codepen: https://codepen.io/justsomexanda/pen/BajXeyj
This question already has answers here:
How wide is the default `<body>` margin?
(4 answers)
Closed 3 years ago.
I have a white border around my entire website right now that I am trying to get rid of. I looked it up online and found several sources that all say to set margin: 0; but when I did this, it is not removing the white border. I suspect it has something to do with using view width and view height instead of pixels or percentages, so how can I remove the white border without changing the width and height from using the viewport size?
.container {
width: 100vw;
height: 100vh;
background: purple;
margin: 0;
}
<div class="container">
</div>
you have to set the margin: 0 property on body not on the div container, hope it helped
body {
margin: 0;
}
.container {
width: 100vw;
height: 100vh;
background: purple;
}
<div class="container">
</div>
* {margin: 0; padding: 0}
I recommend checking basic universal css boilerplate
This question already has answers here:
Force sidebar height 100% using CSS (with a sticky bottom image)?
(17 answers)
Closed 8 years ago.
I have a issue with the left sidebar.
I would like to make the left sidebar 100% height of the browser always no matter what content is there in right hand panel.
<div class="container">
<div class="leftwrapper">Some text</div>
<div class="rightwrapper">Some text for right</div>
</div>
Fiddle -- http://jsfiddle.net/squidraj/32uppbhy/
Percentage heights are relative, you want the containing element .container to stretch the full height of the viewport, so it needs a height of 100%, but 100% of what? So you also need to set it on your html and body elements. Then simply give your absolutely positioned sidebar bottom:0; to stretch it the full height.
Simply change your CSS thus:
html, body { /* ensure the available document space is the full height of the viewport */
height:100%;
padding:0;
margin:0;
}
.container {
overflow: hidden;
position: relative;
height:100%; /* <-- make the containing element full height */
}
.leftwrapper {
background-color: #0b7582;
bottom: 0;
float: left;
position: absolute;
text-align: center;
top: 0;
width: 8%;
bottom:0; /* <-- anchor the element to both the top and the bottom of the viewport */
}
.rightwrapper {
float: left;
margin-left: 8%;
width: 92%;
}
Add the following rule to the top of your CSS:
html, body, .container, .leftwrapper {height:100%;}
Few elements derive their height from body and html tags as their parent. What you can do is simply create a new css rule for body and html tag with a height property of 100% and then another rule for your sidebar height to be 100%. Hope it works :)
CSS rules:
html,body{height:100%;}
.sidebar{height:100%;}