I have col-sm-1 and col-sm-9 and col-sm-3. I want them to have a full height. When I do height:100%, the height goes full only when I have contents inside them. I want the height to be full even when it's just empty.
So I just did height:2000px; background-color:grey; and now this looks like the way I want. However even a beginner like me know this isn't the best way to do it.
Am I allowed to go height:2000px; and deal with it?
Just use the Flexbox.
Assign their parent a class .flexbox, set the CSS as below.
.flexbox .col {
flex: 1;
}
The height 100% fills the space even if the content isn't there but it may be not working just due to parent container height is not set. So, for this you need to define the parent element height in fixed pixel or set 100% height parent-hierarchy way. In short you can fix this problem by just setting the height 100% to the html,body:
html,body{
height: 100%;
}
.your_element{
height: 100%;
}
And here is a demo:
html,body{
height: 100%;
}
div{
height: 100%;
background-color: red;
}
<div>some content</div>
Related
Look at this jsfiddle:
http://jsfiddle.net/w9k2sz52/
#content {
background: #ff0000;
min-height: 200px;
}
.container-fluid {
min-width: 2000px;
}
<div id="content">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<h1>Some title here</h1>
</div>
</div>
</div>
</div>
Why is the width of #content not stretching to be 2000px instead of being the width of the viewport? What do I need to do to make content stretch so that no matter what min-width is set on container-fluid #content will always stretch to fit it
Set #content to inline-block, and then set min-width to 100%. Note that setting width to 100% won't have the desired affect.
#content {
background: #ff0000;
min-height: 200px;
min-width: 100%;
display:inline-block;
}
Adding a float will make the parent element the same width as the child:
#content {
background: #ff0000;
min-height: 200px;
float: left;
}
#content {
background: #ff0000;
min-height: 200px;
display: inline-block;
}
You could use
width:auto;
This should mean it stretches to the width of its contents.
EDIT:
The min-width property in CSS is used to set the minimum width of a specified element. The min-width property always overrides the width property whether followed before or after width in your declaration. Authors may use any of the length values as long as they are a positive value.
You need to set a max-width or width with it. Say you had a width of 80% and a min width of 400px, it will be no smaller then 400px even if 80% of the page is 200px.
You could give the content a min width forcing the div to be auto and be no smaller then the content.
Could #content determine the width, while .container-fluid expands to fill it? Instead of the other way around.
#content {
background: #ff0000;
min-height: 200px;
width:2000px;
}
.container-fluid {
width: 100%;
}
By adding
position:absolute
to your CSS declaration for #content, you force the CSS interpreter to check what elements are inside #content, therefore achieving desired effect.
The problem with absolute positionning is that it remove the element from the natural workflow of the document. Therefore, you are better wrapping the element unto which you want to apply absolute positionning inside another element. This one will stay in the natural workflow of the DOM.
See this jsfiddle: https://jsfiddle.net/7Ls47d83/4/
Google "CSS box model" for more interesting articles and post about this, or this article.
I have this layout:
http://jsfiddle.net/spadez/BN9KJ/2/
It works by having an optional left column. How can I get the column colour extend all the way down the page even if there isn't enough content to fill it.
I was thinking it would be something like this:
height: auto;
But that doesn't seem to work
add the following css
html,body{
height:100%;
}
and then apply height: 100% for the divs
working fiddle
The Logic: setting the height of the body,html element,because it is the parent element..!!
BUT why should we give both html and body --> height:100% ??
the answer is https://stackoverflow.com/a/6654996/2967572
Body looks to its parent (HTML) for how to scale the dynamic property,
so the HTML element needs to have it's height set as well.
just give
#left_column {
width: 250px;
background-color: orange;
float: left;
height:100%; //added
}
along with
html,body{
height:100%;
}
DEMO
BUT
However the content of body will probably need to change dynamically.
Setting min-height to 100% will accomplish this goal.
it will be good alternative to give min-height
#left_column {
width: 250px;
background-color: orange;
float: left;
min-height:100%; //added
}
DEMO with Min-height
I have an image. This image should have 100% height. So, in my CSS, I defined height: 100%. The problem is the respective width, since this image is a panorama, it will certainly exceed the viewport dimensions. I don't want this to happen. Is there a way like overflow: hidden to completely hide the portion of the image after the maximum viewport width.
HTML
<div id="image">
<img src="http://photoblogstop.com/wp-content/uploads/2012/07/Sierra_HDR_Panorama_DFX8048_2280x819_Q40_wm_mini.jpg"/>
</div>
CSS
#image {
height: 100%;
}
Here's the fiddle as well.
http://jsfiddle.net/AH3Hd/
Add this CSS to your div. You need to give it a width or it will just auto adjust to whatever its contents are.
div {
width:100%;
overflow:hidden;
}
http://jsfiddle.net/AH3Hd/4/
To use overflow:hidden;, you need to specify a width to the div, otherwise the browser will not know when to hide. I edited your fiddle to show that:
#image {
height: 100%;
width: 100%;
overflow: hidden;
}
http://jsfiddle.net/AH3Hd/6/
You could do something like this:
#image {
overflow: hidden;
height:300px; // Depends on the size you want
width:300px;
}
#image img{
height:100%;
}
Here's the fiddle: http://jsfiddle.net/jwvanveelen/AH3Hd/7/
I have a parent div with a max height/width set. I was wondering if it's possible to set the two child divs to automatically adjust their height based on a percentage using just CSS?
HTML:
<div id="parent">
<div id="top"></div>
<div id="bottom"></div>
</div>
CSS:
html, body {
height: 100%;
width: 100%:
}
#parent {
max-width: 400px;
max-height: 600px;
}
#top {
height: 30%;
}
#bottom {
height: 70%;
}
The intended implementation of this would be for a mobile display that fills the screen height proportionally without forcing a vertical scroll.
EDIT:
I now realize that height percentages of the parent will work if you have a fixed parent height. The question still stands as to whether there is a way just using CSS to allow for a flexible height that matches the screen size. It's seems like this will not be possible only using CSS and require JS intervention.
Theres nothing wrong with your code. Just adding a 100% height as well as width to the divs yields what you want. The max-width/height doesn't force any values (leaves height/width at auto). Here is a working fiddle:
http://jsfiddle.net/b6HVa/
#parent {
width: 100%;
height: 100%;
max-height: 600px;
max-witdh: 400px;
}
I think you are doing right, if anything going wrong, please show a demo. Or try to set
#top{max-height: 30%;}
#bottom{max-height: 70%;}
Or add min-height: {some value}px; to your div.
I'm trying to get a simple solution for this layout.
This is the simplified html.
<div class='wrapper'>
<div class='header'></div>
<div class='middle'> TEXT </div>
<div class='footer'></div>
</div>
Header and footer have a fixed height in pixels.
middle can have a variable height, depending on the content.
I want wrapper to have a minimum height of 100%. So if the text inside middle is small, the middle div should expand to fill the browser page. And if it's too long, the whole page should be scrollable.
Is this possible easily? Maybe changing something in the layout?
here's your solution: http://jsfiddle.net/S4akv/1/
You do NOT want to set a hard height for the .middle. If your content is only a few lines then you will end up with scrollbars where none are needed.
With a header and footer, you also don't want height: 100% on your .middle class because it will push your footer down, forcing a scrollbar no matter what. You also don't want a clear-cut height:100% because most browsers will interpret this as 100% of the browser height, so when you resize your browser to be larger, either the height won't change or the footer won't move.
The best solution here is to have your wrapper and any associating backgrounds attached to that. Depending on the content within your .middle div this answer could change, but given the simple parameters this is the most elegant way to do it.
the secret is to make sure that all containing elements have a height set. reason being, any block element with height: 100% will only be 100% of the area containing it. in this case you need to set height for middle, wrapper and body, html
body,html { height: 100%; margin:0; padding:0; }
.wrapper { min-height: 100%; width: 100%; background-color: red; position:relative; padding-bottom: 200px; }
.header { height: 200px; width: 100%; background-color: blue; }
.middle { }
.footer { height: 200px; width: 100%; background-color: green; position:absolute; bottom: 0; }
If you have nested content within .middle that also needs to be 100% height there is a better way, using a combination of height, absolute positioning and negative margins. There are a million ways to skin a cat. Well, a handful at least :)
edited to add padding to .wrapper to make room for footer. The bottom padding of wrapper must be the same height as the footer