I have an empty page with one DIV on it:
<div style="height: 20%;
min-height: 10px;
max-height: 100px;
width: 100%;
background-color: blue;"></div>
I want to add a DIV after this one that takes up all remaining vertical space on the page. How do I do it?
I've spent all day on this and CSS is starting to drive me crazy.
What has to be inside this div?
If it's a just a color filler, just put your blue div in a another div wich you give a background color and make that one fit 100% of your browser window?
It will look like 2 divs beneath eachother. If you need content you can always just put another div under your blue one with whatever content you want.
EDIT:
code example:
http://jsbin.com/efefe/2
Assuming you have two divs:
<div id='one'></div>
<div id='two'></div>
where #one has variable height and #two should consume all remaining vertical space you can do:
/* Note you could add a container div instead of using the body */
body {
display: flex;
flex-direction: column;
}
#one {
flex: none;
}
#two {
flex: 1;
}
Furthermore, if you want #two to be scrollable you can add:
height: 100%;
overflow-y: scroll;
which will allow it to scroll vertically to show it's whole contents.
You can read more about display:flex here.
Related
I know, this has been asked 1000 times but NO solution from stackoverflow seem to work for me.
Everyone does stuff like .container { height: 100vh; } while the whole idea is to have footer at the bottom if main content of the page has not enough content to stretch.
Parent has flex as display and column direction. Children have flex-grow: 1 and flex-shrink: 0 respectively. Why does it not work? Why is footer not at the very bottom? What am I missing? I don't know height or footer or main, I want the main to take up all the free space at all times.
JSFiddle version: https://jsfiddle.net/6v2gb1s0/
* {
border: solid 1px red;
}
html, body {
height: 100%;
}
#container {
display: flex;
flex-direction: column;
}
main {
flex-grow: 1;
}
footer {
flex-shrink: 0;
}
<div id="container">
<main>main content</main>
<footer>footer</footer>
</div>
The footer won't go to the bottom because the height of the #container is not set.
If you set
#container {
height: 100%
}
The footer will go to the bottom (albeit there will have a scroll because of the margins, so you gotta compensate for that).
Check it out:
It's fundamentally the way flexbox works. display:flex dictates how its children behave, not the parent element. That element just behaves like a normal div. Thus the parent will try to extend to 100% of the width of the parent container and shrink to the height of the content so you have to set the height (or preferably min-height) to 100%.
To understand more how it works, you can set the body element to display:flex and that will cause its child element (the container) to then stretch like you'd expect, which would be an alterntative to setting the container height to 100%.
Hope this helps.
Consider this very simple header:
.box {
height: 100%;
width: 50px;
background-color: blue;
}
.row {
display: flex;
height: 60px;
background-color: yellow;
}
<div class="row">
<div class="box"></div>
<h1>This string needs to be able to wrap</h1>
</div>
The blue box needs to be defined by the height of the row and the text needs to be able to wrap. But as you can see, when the text wraps it extends beyond the flexbox. The flexbox can't grow at all because I have defined its height. If I remove the height specification then text wrap works correctly but the blue box disappears. This is a quite frustrating problem that I have spent hours trying to figure out. Is there no way to say to the row "your height is 60px but you can go bigger if you need to".
What I've tried so far:
Use min-height: 60px. For some reason the blue box still doesn't show up when I do this.
Use max-height: 100px. The row defaults to that size which is too big for when the text doesn't wrap.
I guess I could write media queries to manually change the height of the row, but it seems like there should be a more flexboxy way of doing this. Any ideas?
Here is the JS Fiddle if you want to play with it.
You don't need height: 100%; on child element of flex element.
And if you want minimum height of 60px on parent element, use min-height: 60px; instead of height: 60px;
.box {
width: 50px;
background-color: blue;
}
.row {
display: flex;
background-color: yellow;
min-height: 60px;
}
Here is the fiddle
https://jsfiddle.net/3bzeht52/
Here's the example of what I have so far:
https://codepen.io/anon/pen/jQZpNw
My objective is to center that box in the middle to the center of the page, and have the rest of the elements respond appropriately. I've ended up using margin-top: 10%; as a way to center the box, but the problem with this approach is that on smaller browser heights users will have to scroll. It's also not perfectly centered.
Ideally, what I'm looking for, is to:
Center the box (vertically and horizontally)
On small browser heights the center box should sit just underneath the navbar with a small margin, to eliminate the scrolling on small browsers.
Sticky the footer with a gap between the footer and the box when the browser height is really small.
When the center box expands its contents or the navbar expands its contents everything else should move appropriately and not overlap.
I made some javascript buttons to expand the navbar and centerbox so it's easier to experiment with. My actual app is obviously different, this is a stripped down version of what I have.
I tried a bunch of different things to get this to work with no luck, when I used calc() to set it to the center on small browser heights the footer or navbar would overlap the box. I'm out of ideas now, and CSS is not my strong suit. Thanks!
You can try a full page wrapper with a header, the footer, and the div you want centered. Using display:flex; with the flex-direction set to column and justify-content: space-between; you can basically center the div. It will be off a little bit if your header and footer are different sizes but you won't need a ton of media queries or code that is hard to maintain. Set the min-height of the wrapper to 100vh and your footer will be sticky, unless the window is too short to fit all of the pieces.
$('#nav-button').on('click', function(e) {
e.preventDefault();
$('#nav-content').toggleClass('expand');
});
header {
background: red;
padding: 5px;
}
header a {
color: white;
}
#nav-content {
height: 0;
transition: height .3s;
}
#nav-content.expand {
height: 300px;
}
footer {
color: white;
background: red;
padding: 5px;
}
#centered-box {
height: 200px;
width: 200px;
background: green;
margin: 10px auto;
}
#wrap {
min-height: 100vh;
display: flex;
justify-content: space-between;
flex-direction: column;
}
body {
margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrap">
<header>
<nav>
Expand
<div id="nav-content"></div>
</nav>
</header>
<div id="centered-box"></div>
<footer>This is the footer</footer>
</div>
Are you using media queries at all in your CSS? Media queries allow you to style elements a certain way if the browser window size falls within the query.
I have a question related to header height.
HTML:
<header>
<h1>
Hello World!
</h1>
</header>
CSS:
header {
background-image: url("../images/header.png");
background-size: cover;
height: 100%;
text-align: center;
color: white;
}
In this case header height fits text height. Is there a way to set header height the same as image height?
You could do the header image as a foreground img tag rather than background image and then do this in the CSS
header {
position: relative;
}
header img {
width: 100%;
height: auto;
}
header h1 {
position: absolute;
top: 0;
}
In the header's css, you can put:
background: url("../images/header.png") 50% 50% / 100% no-repeat fixed;
It will automatically place and size the image so it's not stretched.
Why don't you just use Flexbox? It's the defacto standard these days.
Here is a jsfiddle what I have in mind:
JSFiddle example
Essentially, what you want to do is your <h> element should actually be a child of another div within your <header>:
<header>
<div class="backimage">
<h1>
Hello World!
</h1>
</div>
</header>
Your <header> div, as the flex "container", display child elements as column, without wrap, aligned in the center with space around, and justified center:
header {
display: flex;
flex-flow: column nowrap;
justify-content: space-around;
align-items: center;
align-content: space-around;
}
Child elements within the flex "container" should be ordered for number of appearance either as a row or column, in this case the "container" displays items in a column layout, so you want your header to appear as the first item. flex is shorthand for flex-grow, flex-shrink, and flex-basis; this third one being what size the element should be, the first two controlling what priority or portion of the container element this child element will be treated as compared to other children. In this case, handle it auto. We want to reposition the header to be vertically centered in the containing div, so position: relative;, add 50% of the container's height to the origin point of the ` element's origin (which always starts from the top left of an object), and because the text default is set at 1em, it would logically follow that .5em would be the center, so subtract that from the 50%. Give it text-align center for horizontal centering:
header h1 {
position: relative;
top: 50%;
margin-top: -.5em;
text-align: center;
order: 1;
flex: 1 0 auto;
}
Then you just have to worry about your background. Background, no repeat, define the height of the image (which in this case will be applied to the div itself), border here for example just so you can see the boundary of the div, and don't forget that this should appear second compared to the header:
.backimage {
background-image: url('http://upload.wikimedia.org/wikipedia/ \
commons/4/47/PNG_transparency_demonstration_1.png');
background-repeat: no-repeat;
border: 1px solid blue;
width: 500px;
height: 300px;
order:2;
}
Here's what you end up with:
Here's a great guide on flexbox usage:
Flexbox guide
Could someone please help me?
I have three divs.
enter code here
The one in the middle should always be 1040px.
The left and right one shall fill the whole left space.
How can I make them proportionally grow/shrink when I resize the window?
Here is the code:
http://codepen.io/christophz/pen/413d31df9d33e1205b73bed3ebee1f5d
Thank you very much in advance!
Here is a pure CSS option using CSS display properties of table and table-cell.
DEMO: http://jsfiddle.net/audetwebdesign/a9J7D/
The markup is the same as you proposed.
The CSS is:
.container {
width: 100%;
min-width: 540px; /* you may want this... */
margin: 0 auto;
outline: 1px dashed blue;
display: table;
}
.bar-light {
width: auto;
height: 52px;
background-color: blue;
display: table-cell;
}
.bar-dark {
width: 540px;
height: 52px;
background-color: red;
display: table-cell;
}
Set display: table to .container and for the child elements, display: table-cell.
For .bar-light, set the width to auto and they will be computed to fill in the remainder of the page width (equally).
In my example, I set the center width to 540px to make it easier to see in the fiddle.
Finally, add a min-width to .container, without any content, the table cells will collapse to zero width as you shrink the window size.
Note About Heights
This layout will create three columns of equal height, the height will be computed to enclose the tallest of the three child elements.
This is real quick so it might be slightly off but you should be able to get the idea
HTML
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
CSS
div { float: left;}
.b { width: 1040px;}
JQuery
$(document).onload(resize);
$(window).resize(resize);
function resize() {
var ww = $(window).width();
var width = (ww-1040)/2;
$('.a').width(width);
$('.b').width(width);
}
Add a table with 3 column. In the middle column add you div. specify the size you want for this for these column e.g. 10-80-10. or -80-.