I have a page with following html markup:
<html>
<head>...</head>
<body>
<div class="container">
<header>...</header>
<div class="wrapper">
<div class="row">
<div class="col-md-8">...</div>
<div class="col-md-3 col-md-offset-1 col-aside">
<aside>...</aside>
</div>
</div>
</div>
</div>
</body>
</html>
I set 100% height for:
html, body, body > .container {
height: 100%;
}
.wrapper {
min-height: 100%;
}
.wrapper > .row {
min-height: 100%;
}
.col-aside {
min-height: 100%;
}
So I want that both my columns have minimum height of 100%. While inspecting my page with chrome developer tools I realized that .row and .col-aside don't get 100% height. I am a little bit lost because I saw answers dealing with display: table but I'm pretty sure it's not necessary since I managed to do this layout without bootstrap using just divs and their heights.
So have to stretch columns so that they have min-height: 100% preferably without using display: table and position: absolute?
updated: jsfiddle http://jsfiddle.net/U6H6W/ . Something like that, here you can see that .row doesn't get 100% height in spite of the fact that .wrapper gets 100%
A better solution would be to use viewport height, e.g.:
.col-aside {
height: 100vh;
}
You can easily specify the height of one div, without having to specify the height of the higher level HTML blocks.
Viewport is supported in all modern browsers, and as far back as IE9. IE8 does not support viewport, but if you need legacy support going back that far you can set a fallback to height: 100% (making sure you cover all of the containing blocks.)
Here is a jsbin to demonstrate:
http://jsbin.com/zeyuraka/1/edit
When dealing with heigth:100%, all the parents should be in height:100%. If one isn't, then no child is.
The 100% approach is complicated, especially when it comes to many childs with padding or margins. It could not display what you expect (i.e. exceed screen size).
You could try position: fixed, with bottom:0, but you will have to handle the position of the non-fixed div.
Related
I have divs with images in them stacked horizontally side by side of each other. Images are of different widths and heights.
If I make the container width's smaller than the images, all the divs are uniform nicely.
But if I make the width of the container bigger than the images, the div/container width just seems to stop at the size of the image and refuse to get any bigger. What am I doing wrong or am I misunderstanding anything? I'm still learning my HTML and CSS thank you
PS - I don't want to use background: url(...) because I need my image URLs to be dynamic. Unless this is the only way?
.test__container {
width: 800px;
}
.test__img {
width: 100%;
}
<div class="test__container">
<img class="test__img" src='https://via.placeholder.com/350x150/' />
<h1 class="test__name">Davy Crocket</h1>
</div>
It is possible they are inside a flex container (that has display:flex). That makes it treat width property of children differently.
When you create a flex container (display: flex or display: inline-flex), it comes with several default settings. Among them are:... read more
(specifically it forces items to stay on one line [no matter the count])
Give the images a width of 100%. This will make them as wide as their parent, not as wide as their native size.
&__img {
width: 100%;
}
Update (based on added context): if the parent container has a display property of flex, one has to set min-width to 100% on the image. Note: flex-wrap: wrap should also be set on parent, to prevent siblings from creating a horizontal scrollbar on parent.
An alternative solution is to give the image flex-basis of 100% and flex-shrink of 0.
However, flex calculation is dependent on several other CSS attributes of the image as well as on CSS attributes and content of siblings and of parent elements. The safest option for flex remains min-width, as it trumps the result of flex calculation (basically the flex calculation starts from the given min-width and distributes the remaining space, if any, to the flexible siblings).
as you can see from the snippet below wrapping your code in a flexbox container doesn't change anything by itself. There most be either additional css or something else going on.
I edited your original post. You will get help faster if you post snippets here instead of providing a link to js fiddle.
.test__container {
width: 800px;
}
.test__img {
width: 100%;
}
}
#container{
display:flex;}
<div id='container'>
<div class="test__container">
<img class="test__img" src='https://via.placeholder.com/350x150/' />
<h1 class="test__name">Davy Crocket</h1>
</div>
</div>
<br><br>
<div class="test__container">
<img class="test__img" src='https://via.placeholder.com/350x150/' />
<h1 class="test__name">Davy Crocket</h1>
</div>
Try this.
<html>
<head>
<style>
.page {
width: 500px;
}
.container {
float: left;
width: 50%;
}
img {
float: left;
width: 100%;
height: 500px;
object-fit: cover;
}
</style>
</head>
<body>
<div class="page">
<div class="container">
<img src="https://news.harvard.edu/wp-content/uploads/2022/02/20220225_wondering_dog-2048x1366.jpg" alt="" />
</div>
<div class="container">
<img src="https://www.princeton.edu/sites/default/files/styles/full_2x/public/images/2022/02/KOA_Nassau_2697x1517.jpg?itok=Hy5eTACi" alt="" />
</div>
</div>
</body>
</html>
I'm stressing out because of a mindbreaker and I'm probably missing some essential, but easy thing.. And although I've done this many times before.. it's going wrong now.
So I'm creating a web app and always my starting point is
html, body {
height:100%;
width:100%;
}
And some of my inner elements have a set height in percentages and some in pixels.
However, to have some structure in my code, I'm setting up div's without a set height. Let's set up the following situation.
HTML
<div class="wrapper">
<div class="thisIsAStructureItem">
<div class="innerElement">
And just some untagged piece of text
</div>
</div>
</div>
CSS
.wrapper {
height:100%;
width:100%;
}
.thisIsAStructureItem {
/* nothing, not even height */
}
.innerElement {
height: 17.5%;
}
But in any editor or browser, because I haven't set a specific (%/px) height on the second element, it shows up as 0px, including all the inner elements.
So stupid as this might be.. What am I doing wrong?
UPDATE: See this JSFiddle
The situation makes it appear a set height is necessary, therefor so my title. Feel free to adjust to something more suitable
The situation above is a replica of a to-build-situation and using exact pixels is (at that above part) not an option. Please don't advice 'use X pixels'.
Original: http://jsfiddle.net/o0Lfyt0m
Updated: http://jsfiddle.net/o0Lfyt0m/1/ (from code sample below)
The innerElement is trying to display as 17.5% as tall as the parent element. The problem is that the parent element does not have a defined height. As a fall back to calculating 17.5% of undefined, the div's height is essentially defaulting to "auto" and assuming the height of it's content, which is based on the size of the font, line-height, padding etc.
Edit: A nice feature of CSS is that an elements styles can be inherited from it's parents. You can add a structure class which will inhert the height from it's parent element, which seems to be your intent.
You could even add this class to the body element, since it's height and width are identical to html... just not certain if the HTML element can be styled in all browsers, so I didn't do that.
html, body {
height: 100%;
width: 100%;
}
.wrapper {
height: 100%;
width: 100%;
}
.struct {
height: inherit;
width: inherit;
}
.innerElement {
height: 17.5%;
}
<div class="wrapper">
<div class="struct"> <!-- .struct inherits height/width from .wrapper -->
<div class="innerElement"> <!-- height calculated based on .wrapper -->
And just some untagged piece of text
</div>
</div>
</div>
Yes, you need to set the height 100% for that div too. Otherwise it's height is unknown and will not be able to take exactly the 100% height and innerElement height is not calculated accordingly.
To make sure, you must use the height 100% for that div too.
.wrapper {
height:100%;
width:100%;
}
.thisIsAStructureItem {
height: 100%;
}
.innerElement {
height: 17.5%;/* calc from it's parent div height i.e. thisIsAStructureItem*/
}
You are, in effect, asking the browser to calculate a height from an undefined value. Since that would equal a null-value, the result is that the browser does nothing.
I have a div structure like this,
<div style="height:100%">
<div style="height:50px"></div>
<div id="auto" style="height:100%"></div>
</div>
But it seems like id="auto" is taking the height as its parent height and the parent overflows. Can just set css in a way that id=auto div take the remaining height of the parent ?
What I'm trying to do is to make the id=auto div to take the rest of the space on parent div resize.
here is the jsFiddle
That's because percentage value for height property is relative to the height of box's containing block. Therefore 100% means the entire height.
10.5 Content height: the 'height' property
Specifies a percentage height. The percentage is calculated with
respect to the height of the generated box's containing block. If the
height of the containing block is not specified explicitly (i.e., it
depends on content height), and this element is not absolutely
positioned, the value computes to 'auto'. A percentage height on the
root element is relative to the initial containing block.
One solution would be using a negative margin for the second <div> element to remove the srcollbar and then adding position: relative; to the first one to bring it back on the top of the second one.
In this case we should use padding on top of the second div to push its content down and also adding box-sizing: border-box in order to calculate the height of the box including padding borders:
Example Here
<div class="parent">
<div class="top"></div>
<div class="content"></div>
</div>
.parent { height:100%; }
.top {
height: 100px;
position: relative;
}
.content {
background-color: gold;
min-height: 100%;
margin-top: -100px; /* equals to the height of .top element */
padding-top: 100px; /* equals to the height of .top element */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
It's worth noting that this approach would work on IE8+.
Nowadays all major web browsers support box-sizing: border-box, however you use a spacer element instead of padding+box-sizing to push the content of .content down:
Example Here.
<div class="content">
<div class="spacer"></div>
<!-- content goes here -->.
</div>
.spacer, .top {
height: 100px;
}
This approach would work on IE 6/7+(*)
Alternatively, you could nest the .top element within the .content and drop the .parent in order to achieve the same result which is working on IE 6/7+(*).
Example Here.
<div class="content">
<div class="top"></div>
<div class="inner">
<!-- content goes here -->
</div>
</div>
(*) IE6+ by using height property, IE7+ by using min-height.
If you don't need to support IE8 or IE9, use CSS calc (http://caniuse.com/calc)
<div style="height:100%">
<div style="height:50px"></div>
<div id="auto" style="height:calc(100%-50px);"></div>
</div>
If you do need to support the older IE's, then I would suggest using display:table, display:table-cell, and display:table-row. There are a lot of little quirks to keep in mind when using the table displays, so stick with calc if possible.
You can achieve the desired result, if you can absolutely position the first child div (the one that is 100 pixels tall):
Demo: http://jsfiddle.net/rn2Xe/2/
<div style="height:100%; padding-top:100px; box-sizing: border-box; position: relative;">
<div style="height:100px; position: absolute; top: 0; width: 100%; box-sizing: border-box;"></div>
<div style="height:100%;"></div>
</div>
Note: Use classes for CSS. Your code could be much cleaner.
You might be able to solve this with css calc, but if you want good legacy support, use tables.
Can anyone help me with position my content block?
It looks good if there are a lot of content, but not when window higher than content block.
Actualy I need that "content" block on my picture teked all free space (height) and thats why footer stick to the bottom.
I have next HTML markup:
<div>
<header></header>
<nav class="breadcrumbing"></nav>
<section class="left_nav"></section>
<section class="content"></section>
<footer></footer>
</div>
With this CSS:
html,body{width:100%;margin:0;padding:0;}
body{background-color:#629302}
body>div{width:400px;height:100%;margin:0 auto;background-color:#FFF;}
body>div>header{height:50px;background-color:#9dc155}
body>div>nav.breadcrumbing{display:block;height:10px;margin:0;padding:0;}
body>div>section.left_nav{width:172px;margin:8px 20px;float:left;background-color:#cdef88}
body>div>section.content{width:168px;float:left;}
body>div>footer{padding:19px 19px 22px;background-color: #e58b04;clear:left;}
I allready tried answers from Is it possible to get a div's height to be 100% of an available area? and some same questions but with no luck.
ALso my live HTML has backgroun-images, so I can't just put footer to the bottom with position:absolute.
There I post my HTML to preview: jsfiddle.
UPD: scaled live preview:
You will have to set the html and body height property to 100%; then you can set the footer height to 100%; this will tell the main container elements the real meaning of 100% and it will work.
Your updated fiddle
Basically, these are the rules you have to add:
html, body {
height: 100%;
}
footer {
height: 100%;
}
Update
Ok, I might have misunderstood your requirements, here is a cleaner example:
Working example
Basically, what you additionally do in this example is having your wrapper element display:table with an height: 100%, then you make your footer display as table-row.
Important note: This solution uses display-table which is compatible only for IE8+. If supporting IE7 is an issue for you, then you have two solutions that I can think of out of my head:
Either you use a fixed-width footer, push it below the content and then pull it back with a combination of negative margin and padding.
Or you fallback to support of older browser by putting your footer in position using some javascript.
This the breakdown of the code:
HTML
<div class="wrapper">
<header></header>
<section class="main-content">
{child elements of your main-content area}
</section>
<footer></footer>
</div>
CSS
html, body {
height: 100%;
margin: 0;
}
.wrapper {
display: table;
margin: 0 auto;
height: 100%;
}
.main-content {
display: table-row;
height: 100%;
}
footer {
display: table-row;
}
Here's an updated fiddle
The crux of this is setting the body to be absolutely positioned to the viewport. From there, if you wanted to allow it to scroll as you normally would, then you would change the footer's position to fixed and the content div's CSS to this:
body>div>div{width:400px;height:100%;margin:0 auto;background-color:#FFF;
position:absolute; top: 0; bottom: 0; overflow-y:auto;}
I've wrapped your content div in another to allow for the automatic margins to center your page, and then defined the footer's box sizing as border-box to account for the padding you're adding to it as well.
I have a problem with my HTML/CSS webpage. I want to have this layout:
http://img227.imageshack.us/img227/9978/layoutw.png
But all what I get is a layout in which the areas are only as high as the content is.
Here you can see my website: http://ud05_188.ud05.udmedia.de/spotlight/jquery.html I tried several work-arounds, but it does not work.
What's the best way to solve this?
you can use the following code
html
<div id="wrapper">
<div id="left"></div>
<div class="right">start of top</div>
<div class="right">start of bottom</div>
</div>
css
html, body {
height:100%;
}
#wrapper {
height:100%;
overflow:hidden;
}
#left {
height:100%;
width:50%;
background:#09F;
float:left;
}
.right {
height:50%;
width:50%;
float:left;
background:#69a;
}
live example: http://jsbin.com/idozi4
What you're looking for is an adaptation of the Holy Grail method. In this case, #list1 is the 'left' column (as described in that article) and the rest goes into the 'center' column, so that means you can leave out the 'right' column altogether.
Basically something like:
<div id="container">
<div id="left">
#list 1 contents
</div>
<div id="center">
<div>
#list2
</div>
<div>
#data
</div>
</div>
</div>
#container {
padding-left: 200px; /* LC width */
}
#container > div {
position: relative;
float: left;
}
#center {
width: 100%;
}
#left {
width: 200px; /* LC width */
right: 200px; /* LC width */
margin-left: -100%;
}
Heights will always be tricky... some solutions call for using explicit heights, but then if your content ever gets bigger, it'll overflow and look nasty, or worse, overflow and be inaccessible to the user.
You can use min-heights to display a best-case scenario, in which if the content needs to be taller, the minimum requirement will allow the div to stretch. You can use absolute positioning to get the layout that you want, but then the divs wont be flexible enough to accommodate content. You can use overflow: scroll to allow the divs to act like frames, but that is usually more annoying and messy-looking for the user.
I'd say use the above holy grail method to lay the containers out, and then use min-height for a best case scenario layout.
If none of those solutions are good enough, then there are also plenty of blog posts out there from experts about how to get equal height columns more consistently.
By default, giving something height: 100% will make the item as big as the item that contains it. This works for, say, divs within divs, but not for divs directly within the body tag. For this to work you need to set the height of the body element. Like so.
html, body{
height: 100%;
}
Hope this helps.
Update:
I think you are having trouble because you are trying to do two things which are tricky with CSS: fixed-to-bottom-of-page footers and 100% height. I think you will have to change the way that your footer works in order to get the 100% height working.
I haven't got a complete solution but I have made an example page:
http://deviouschimp.co.uk/misc/stackoverflow/columntest.html
That should sort out your 100% height issues. The footer doesn't always match the bottom of the content (#wrap height:94% gets it close, but it's not perfect).
This sticky footer technique should sort the rest out: http://www.cssstickyfooter.com/
Good luck!