This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 8 years ago.
The div container .wrapper under #Wrapper must fill the space between header and footer. So it should get the height of the #Wrapper container.
jsFiddle Example - UPDATE
Could you help me?
The easy way, because your header and footer have specific heights, is to do the following:
// Add the following to #wrapper
#wrapper {
position: absolute;
top: 200px;
left: 0;
right: 0;
bottom: 200px;
// IMPORTANT
// REMOVE the following rule:
// min-height: 100%;
}
Remember to remove the min-height: 100%; from #wrapper
Here's a fiddle. Good luck...
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:
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;
}
This question already has answers here:
How does the "position: sticky;" property work?
(33 answers)
Closed 2 years ago.
I need a header 1 element that stays fixed at the top of the screen and has a relative position.
Here are the HTML elements:
<h1 class="sticky">Text goes here</h1>
And here is the CSS:
.sticky {
top: 0;
text-align: center;
position: relative;
position: fixed;
/* I know I cannot add multiple */
/* position properties, so my */
/* question really is what should */
/* I do from here? */
}
For some reason, that doesn't seem to work. I either use sticky, or relative.
Is there a fix for this?
The text is being centred... the problem is that using position:fixed makes the div the same width as the text, so there is no extra space around it so it doesn't appear to be centred.
All you need to do is make the div the full width of the screen, then the text will be centred across the full width rather than in a smaller container.
.sticky {
text-align: center;
position: fixed;
/* rest of your CSS here... */
}
You can see it in this Working Snippet:
.sticky {
top: 0;
width:100%;
text-align: center;
position: fixed;
}
<h1 class="sticky">Text goes here</h1>
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:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 8 years ago.
I created a page that has three tables. The second table is inside a div with overflow: auto.
My problem is precisely in this table. I need the entire page has never more than 100% in height.
- The first table should always be visible at the top of the page;
- The third table should always be visible at the bottom of the page;
- The second table should have their height varied according to the space remaining to complete 100% of the browser.
Does anyone know how to solve my dilemma?
Here is a demonstration of the code: http://jsbin.com/omeRUtIr/7/edit?html,css,output
You need to do something like that:
#header {
position: absolute;
top: 0px;
width: 100%;
height: 50px;
}
#content {
position: absolute;
top: 50px;
bottom: 50px;
overflow: auto;
width: 100%;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
height: 50px;
}
You can see the result here: http://jsbin.com/omeRUtIr/13/edit
You can also use percentage (instead of fixed height) if you want each table to have one third of the height for example. You will get something like this: http://jsbin.com/omeRUtIr/15/edit.