I have a container div, which I want to stretch to at least the entire height of the window. If there's a lot of content in the container div, I want it to stretch to more than the window's height. This works.
In the container div I have an image. After/below the image, I have a second div. I want this nested div to stretch vertically to fill the remaining space of the container div. This doesn't work.
I've tried to illustrate the problem in this image. I want the div to stretch in the way illustrated in the left side of the right image, not as it looks on the right side of the right image.
The following is my code. As you can see, in this code I don't even try to make the div under the image stretch vertically, as nothing has worked. "Height: 100%" doesn't do the trick, as I've defined "100%" to be the height of the window by default, in order to make the container div to stretch to at least the window's height.
* {
margin: 0;
padding: 0;
}
body {
overflow-y: scroll;
overflow-x: hidden;
}
body,
html {
height: 100%;
}
.container {
display: block;
overflow: auto;
min-height: 100%;
height: 100%;
height: auto;
}
.bottom {
width: 100%;
}
<div class="container">
<img src="image.jpg" width="100%">
<div class="bottom">
LOREM IPSUM
</div>
</div>
I have spent way too much time trying to figure it out, but by George I've got it!
The "Eureka" moment was reading other questions where people were asking "how can I do it without using tables?" Because of course this layout is easy with tables. But that made me think of display:table.
As this blog post nicely argues, using display:table gives you table layouts without the nasty mark-up overhead as HTML table layouts, allowing you to have semantic code and different layouts for different media queries.
I did end up having to make one change to the mark-up: a wrapper <div> around the image. Also, max/min heights are all weird when dealing with table displays: height settings are treated as preferred heights given the constraints of parent and child elements. So setting a height of zero on a display:table-row wrapper div made that row fit to the content image exactly. Setting a height of 100% on the content div made it nicely fill the space in between the image and the minimum height of the parent container.
Voila!
Condensing just the essential code:
body {
overflow-y: scroll;
overflow-x: hidden;
}
body,
html {
height: 100%;
}
.container {
display: table;
width: 100% height: 100%;
/* this will be treated as a Minimum! It will stretch to fit content */
}
div.wrapper {
display: table-row;
height: 0px;
/* take as little as possible, while still fitting content */
}
img {
display: table-cell;
width: 100%;
/*scale to fit*/
}
.bottom {
display: table-cell;
height: 100%;
/* take as much as possible */
}
<div class="container">
<div class="wrapper">
<img src="http://placekitten.com/600/250" />
</div>
<div class="bottom" contentEditable="true">
</div>
Works in Firefox 25, Chrome 32, Opera 18 and IE10. Doesn't work in IE 8, but then what does? It doesn't look broken in IE8, it just doesn't stretch to fit.
If you can test it in Safari, IE9, or mobile browsers, leave a comment.
Flex boxes will be nice, when they are widely supported.
Even nicer would be a change in the spec so that if you specify min-height on a parent, you can use percentage values for a child object's min-height, instead of requiring that the parent height value has to be set explicitly for child height percentages to have any meaning. But I digress...
In the meantime, using "faux columns" can sort of get the effect you want. The concept is simple: you let the child div have an auto height, but then you paint the background of the parent such that it looks like the child div's background is continuing to the full height.
The example at that link does it with a background image, but you can use a background gradient if you don't mind sacrificing support for Safari and IE9-. (Remembering that lack of support just means not-quite-so-pretty, everything is functionally the same.)
Example here:
http://fiddle.jshell.net/y6ZwR/3/
The non-javascript way is to use flexbox. How exactly depends on a lot of details, but you can play around at http://the-echoplex.net/flexyboxes/.
Polyfills do exists, but what exactly to use depends on which browsers you are targeting.
Related
How can I style a div with CSS to automatically fit in a gap? At the moment, I have something like this
HTML
<div id="wrapper">
<div id="auto-width"></div>
<div id="changing-width"></div>
</div>
CSS
#wrapper {
padding: 30px;
}
#wrapper * {
height: 50px;
display: inline-block;
}
#auto-width {
width: 271px; /*I don't want to have to set this value*/
}
#changing-width {
width: 140px;
float: right;
margin-left: 30px;
}
I want the div with the ID "auto-width" to change it's width based on the padding of the wrapper, and the width and margin of the "changing-width" div. I don't mind using the padding and margin values, but in my actual project, the width of the "changing-width" div actually changes depending on the amount text in it and I want to "auto-width" div to change with it.
JSFiddle example:
https://jsfiddle.net/bve8162f/
If the width of the right div is fixed, then you could set the width of the left div like so:
#auto-width {
width: calc(100% - 200px);
}
...where the 200px is the width of your right div plus the padding. If you're using a css preprocessor like Less or Sass, you could create a variable so you can define the value in one place for both styles.
Note that the 100% refers to the explicit width of the parent. This solution seemed to work in your fiddle (updated version here,) but if your production code is set up a little differently, this may not work. I'll see if I can stumble across a different way, but this is one method I personally like to use when I can.
Edit: For the sake of simplicity, I reduced my problem with overlay (see Background below) to width of a div. By doing that I however created a different and somewhat artificial problem. The accepted answer solves my real problem. The "reduced" problem is not solved there.
How can I make div with width equal to 100% of the page width? (without setting fixed min-width)
Seemingly, the solution is trivial. <div> with its 100% width should be OK by itself. That works fine unless you shrink the browser window below the page width (that's when scroll bars appear). Then the width of the <div> element is equal to the window size, not to the page size.
A note on the demonstration code: The first div simulates the page width. The divs below are my attempts to achieve an element wide across all page. If the page is big enough (more than 500px), they are rendered as expected - all over the page. But if you shrink the window (below 500px) and scroll bar appears, then the divs also shrink, although I want them to stay at 500px.
Here's the code, or check it out on jsFiddle if you prefer
/* just to see sizes of the elements */
div {
border: 1px solid red;
}
/* this simulates the width of the actual page content */
div#fixed {
width: 500px;
}
div#full1 {
width: 100%;
}
div#full2 {
width: 100%;
min-width: 100%;
}
div#full3 {
position: relative;
display: inline-block;
width: 100%;
}
/* this works fine, but uses fixed size min-width, I cannot use */
div#fullOK {
width: 100%;
min-width: 500px;
}
<div id="fixed">Width fixed to 500px</div>
The DIVs below are attempts to achieving 100% width despite scrolling. All work only if the window is wider than 500px.
<div>default</div>
<div id="full1">just width 100%</div>
<div id="full2">width and min-width 100%</div>
<div id="full3">run out of ideas</div>
<br>
<br>
<div id="fullOK">fixed min-width is the only thing that works (unusable for me though)</div>
Background: I have a page, which has an editor area that can be resized by the user. It has a modal dialog windows support, which - when invoked - shows a window and covers the rest of the page by a semi-opaque background with height and width set to 100%. It works well, unless it is viewed in window smaller than the page. Then scrolling shows part of the page not covered by the background, which looks ugly. I need to have this background spanning all over the page, not just over the visible area. Setting min-width and min-height could be done only with the help of JavaScript (due to unknown page size, as the user can resize the canvas) and I'd prefer avoiding that.
Use position: fixed for the overlay. The scrolling doesn't matter as elements that are fixed will position themselves in relation to the viewport. height: 100% and width: 100% will keep the overlay over the entire page no matter what you do.
From the MDN (emphasis mine):
fixed
Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it when scrolled. [...]
CSS / HTML / Demo
* {
margin: 0;
padding: 0;
font-size: 1.5em;
}
body {
background: white;
}
.cover {
position: fixed;
height: 100%;
width: 100%;
background: rgba(255, 0, 0, 0.7);
}
<div class="cover"></div>
<h1>I am overlapped!</h1>
<input type="text" value="cant touch this" />
I need to center images that will be wider than the parent div that contains them. the parent div is a fixed width and has the overflow set to hidden.
<div style='overflow:hidden; width:75px height:100px;'>
<img src='image.jpg' style='height:100px;' />
</div>
I must use an image as the child element because I need to resize the thumbnail dimensions and cannot rely on background-size since it is not supported on older versions of mobile safari which is a requirement. I also cannot use javascript for this, so it must be a css solution.
One more thing to note is that widths will vary between images, so I can't just use absolute positioning on the child element at a hard-coded offset.
Is this possible?
UPDATE:
for posterity, I've just found out that this can be accomplished on the older versions of mobile safari by using
-webkit-background-size:auto 100px;
of course, the background will be set as usual using 50% for left positioning. If you need this to work on another browser, the accepted solution is probably the best, but since this question was related to the iphone, this solution is a little cleaner.
How adverse are you to extra markup? Also, is there a max size for the images? For example, if your max image width is 225px then you could try:
<div class="frame">
<div>
<img src="image.jpg"/>
</div>
</div>
.frame {
overflow: hidden;
width: 75px;
height: 100px;
position: relative;
}
.frame > div {
position: absolute;
left: -5075px;
width: 10225px;
text-align: center;
}
.frame img {
height: 100px;
display: inline-block;
}
A fiddle example here: http://jsfiddle.net/brettwp/bW4xD/
Wouldn't using a background image still work? You shouldn't need to resize it.
Does something like this make sense? http://jsfiddle.net/QHRHP/44/
.container{
margin:0 auto;
width:400px;
border:2px solid #000;
height:250px;
background:url(http://placekitten.com/800/250) center top no-repeat;
}
Well if you know the width of the div and the width of the image, you can simply do some math.
Let's say the div is width 200px and the image is width 300px:
div.whatever {
width: 200px;
}
img.someImg {
left: -50px;
position: relative;
}
We know that since the width of the div is 200 pixes, then 100 pixels will be cropped from the image. If you want to center the image, then 50 pixels be hidden past the boundaries of the div on either side. Thus, we set the left position of the image to -50px.
Example (knowing the image size): http://jsfiddle.net/7YJCD/4/
Does that make sense?
If you don't know the image size or the div size, you can use javascript to detect these values and do the same thing.
Example (not knowing the image size, using jQuery javascript): http://jsfiddle.net/K2Rkg/1/
Just for reference, here's the original image.
I need my content column to expand to the bottom of the page when it's content is shorter than the viewport, but still expand when the content is longer. The column has to come down a little ways from the top of the page.
Here is the HTML for what I described:
<html>
<body>
<div id="content">
<p> asdf ghjkl </p>
</div>
</body>
</html>
Here is the CSS
#content {
min-height: 100%;
margin: 100px 0 0;
}
The issue with this method though is that min-height: 100%; does not take padding into account so the page is always bigger than what I want.
This is the behavior I am seeking:
Is there any way to accomplish this without using Javascript?
Absolute positioning can do this for you:
First remove your min-height and margin then apply this rule to your CSS.
#content {
position: absolute;
top: 100px;
bottom: 0;
}
In CSS3, you can use box-sizing
By setting it to border-box, you can force the browser to instead render the box with the specified width and height, and add the border and padding inside the box.
Ok blokes and birds, here's what I ended up doing. Instead of solving the problem directly, I added a few fixer divs.
First off, here are a few observations:
We know that when #column is longer than the viewport, the length of #column needs to specify the height of <body>.
If #column is shorter than the viewport, the height of the viewport needs to specify the height of <body>.
The column needs stretch to the bottom of the page under all circumstances, regardless of how long it's content is.
For the first criteria we need to make sure that height: auto is set on <body>. Height defaluts to this if it's not set. We also need to make sure that #column has height: auto; and overflow: hidden; so that it expands to the size of it's content.
For the second criteria we need to set position: absolute; and min-height: 100%; on <body>. Now the length of <body> will expand when #column is longer than it, but won't go shorter than the viewport. This next part is where the fix comes in.
For the third criteria, the trick is to add some extra divs and give them some special css. In my HTML I added two divs right outside of #column.
<div id="colhack-outer">
<div id="colhack-inner">
</div>
</div>
<div id="column">
...
</div>
For the outside div you postiion it absolutely and set it's height to 100%, force it to use an alternative box model and shift it's content area using padding. You apply all your column styling (background color, border radius, shadow, etc.) to the inner div. Here is the CSS I applied to them:
#colhack-outer {
height: 100%;
padding: <where you want to shift the column to>;
position: absolute;
width: 50%;
}
#colhack-inner {
height: 100%;
width: 100%;
background-color: #303030;
}
You also have to make your actual content container use that special box model and shift it with padding too:
#contentbox {
position: relative;
padding: <where you want to shift the column to>;
width: 50%;
color: #EEEEEC;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Live example here: http://nerdhow.net/
post a comment if you have questions or if something wasn't clear.
You can achieve it by using Absolute positioning and adding extra block (if you need a solid background under you column).
So, when you'll have a little content, you'll get http://jsfiddle.net/kizu/7de7m/
And if you'll have a lot of content, you'll get http://jsfiddle.net/kizu/7de7m/3/
Try this jsFiddle: http://jsfiddle.net/8R4yN/. It seems to work the way you want. I took some tips from: http://www.tutwow.com/htmlcss/quick-tip-css-100-height/. It looks like the overflow is causing the hiding, and the #content inside there is also not helping out :).
I'm trying to build a quick overview that shows the upcoming calendar week. I want it arranged horizontally so it can turn out to be quite wide if we show a full calendar week.
I've got it set up right now with an inner div with a fixed width (so that the floated "day" divs don't return below) and an outer div that's set to width: 100%. I'd LIKE for the outer div to scroll horizontally if the page is resized so that the inner div no longer fits in it, but instead the outer div is fixed larger at the width of the inner div and the page itself scrolls.
Gah I'm not good at explaining these things... Here's a bit of code that might clear it up..
The CSS:
.cal_scroller {
padding: 0;
overflow: auto;
width: 100%;
}
.cal_container {
width: 935px;
}
.day {
border: 1px solid #999;
width: 175px;
height: 200px;
margin: 10px;
float: left;
}
and the (simplified) structure:
<div class="cal_scroller">
<div class="cal_container">
<div class="day">Monday</div>
<div class="day">Tuesday</div>
<div class="day">Wednesday</div>
<div class="day">Thursday</div>
<div class="day">Friday</div>
</div>
</div>
So to try again - I'd like the cal_scroller div always be the page width, but if the browser is resized so that the cal_container doesn't fit anymore I want it to scroll WITHIN the container. I can make it all work if I set a fixed width on cal_scroller but that's obviously not the behavior I'm going for. I'd rather not use any javascript cheats to adjust the width of the div if I don't have to.
Your cal_scroller class is 100% + 20px (padding) wide. Use a margin on cal_container instead, like so:
.cal_scroller {
padding: 10px 0;
overflow: auto;
width: 100%;
}
.cal_container {
margin: 0 10px;
width: 935px;
}
See here for a description of how the box model works (in short, the everything is outside the width/height of an element).
Also, block elements (like <div>s) are 100% width by default, making your 100% width declaration redundant.
One problem I see is your width: 100% rule. div.cal_scroller is already a block-level element, so it'll default to filling the entire page width. (Not to mention that padding is added on top of width, so you end up with that div being bigger than the page.)
Just get rid of that width rule, and you should be golden. (I just tried myself, and it worked like a charm.)
I didn't read your question very carefully, but when you have width: 100% and padding, that's generally not what you want.
100% + 20px > 100% - that might be the problem.
I struggled with this a lot but the simplest solution I found was adding:
.cal_container { white-space: nowrap; }
This way you don't have to give it a width at al. It just makes sure everything stays in one line.