I am having problems getting my main content div to stretch to full height, the other container is able to stretch to full height.
http://westcountrycreamteas.co.uk/test.html
Is the page I am trying to stretch down and the div that is having problems is inner.
Remove
height: auto !important
from your container div #outer.
Should fix the issue.
You could try
#para {
margin-left: 10%;
height:999px;
overflow:hidden;
}
but i think,the content area shallstretch depending on the content.
Fiddle http://jsfiddle.net/CPfyL/
There is a bug in your outer div. You have set its height using a percentage, but heights can only be set using px. What should you do:
Set the outer div height to a desirable amount, eg: height: 900px;
Set the height of the div you're talking about the same as the outer's one.
i think you want max-height :
div{
height:100%;
}
Related
I added a min-height on a div in a flex layout parent. It seems that the min-height impacts the div if its real height is greater than min-height.
Take below code as an example:
https://codepen.io/zhaoyi0113/pen/ejwJGM
I set 100px as min-height on the div but it gets overlay each other if its real height is greater than 100. In above case, I expect the div shows hello world in one block but it doesn't. If you inspect the dom structure you will find that the <p> doesn't extend its parent div height. How can I fix it?
Since you've set height 200px on the .div1 flex box tries to fit all the child elements inside 200px, but the min-height prevents it to fit all children within the 200px.
Depending on what you want to achieve you might want to change the height on the .div1 or add flex-shrink: 0 on .div2
try changing the height of the paragraph to inherit.
p {
height: inherit;
}
this will make it inherit the height from its parent.
see the result here
Alternative solution is to add display: table; to your div2.
First off, here is a JSFiddle that represents the issue.
I am trying to have a "container" id that is the size of the entire viewport. This is so all div items in #container fit inside the page without scrolling. I assumed thats what height: 100% in html, body, and #container would do.
It seems though, that the .thirdwidth elements height is that of the full viewport, and is not just expanding to the bottom of the #container div (if you inspect the element, it appears that the .thirdwitdh elements go outside the #container)
Does anybody know why this is happening? I would like to be able to have all Sections 0-3 fit on the page without scrolling.
To achieve 100% viewport height you can try 100vh, but why are you placing it's position to absolute.
body {
margin:0;
padding:0;
}
#container {
height: 100vh;
width: 100%;
position:relative;
overflow:hidden;
}
Thanks to #Abbr for this answer (thought I would post a standalone answer so it's not hidden within the comments)
Due to the fact that the gameinfo id is 20% of the parent div, setting the .thirdwidth columns to 100% height made the entire page 120%
Changing the height of the .thirdwidth in my CSS to 80% fixed it!
I have a div named 'post-wrap'. I have the height for this div set to auto. But, for some reason, I cannot get it to grow when content is added. What am I doing wrong? Does it have to do with the floats?
http://jsfiddle.net/h8gSV/
Your parent element, post-top has its height fixed at 50px.
You have set a height to #post-top, which encloses all other elements. Thus your height is always 50px. And yes you need to clear the floats:
#post-top {
width: 580px;
overflow: hidden;
}
You need to add a clearfix class to #post-wrap and remove the height:50px from #post-user.
Fiddle: http://jsfiddle.net/kboucher/rH4h5/
Sorry to ask a really obvious question I'm sure it has a really simple answer, I just can't figure it out.
Very simply I want to place images inside of divs, where the images fill 100% of the height of the div.
CSS
.container{
height:100%;
float:left;}
img {
height:100%;}
HTML
<div class="container">
<img src="xyz.jpg" />
</div>
The result is as expected but with a large amount of whitespace to the right of the image (within the div) when viewed in any non-webkit browser.
In my layout I want to have many of these divs lined up (by float) in a row so its essential that the div's width shrinks to that of the image.
http://jsfiddle.net/osnoz/VzrnT/
By default, a div without specified height dimensions only expands enough to encompass its contents. Without a specified width, the div will expand to the width of its parent. So until you specify the width, the div's width will not shrink down to the image.
Your div is set to 100% height, which is in relation to its container height, not its contents.
You also do not need to specify 100% on the image itself. This will only make the image stretch to 100% of its container's height. Unless, you specify a container height, this is pointless.
I don't know if I understood the question right, but here it goes:
.container { display: inline-block; height: 100%; }
.container img { height: 100%; }
See the example at jsfiddle.net/erxLv/2
I'm trying to use a side panel with a width of 20% and a height of 100% so that they will re-size depending on browser width and height etc. I'm having a problem with the height (100%) part of the CSS, it doesn't seem to fit the entire height of the browser window though - it just displays 100% of what's in the side panel.
How can I make the side panel reach the bottom of the page no matter how much content is inside of it?
#sidebar{
float:left;
position: relative;
width: 20%;
height: 100%;
background-color: red;
}
Height 100% is always a pain.
Make sure that, html, body also have height: 100% and any div that's wrapping it.
When you set something with percentages, you must always consider "percent of what?" It's always the parent of the element. So what is the parent set to? If there is no defined height in units for the parent, percentage has no reference.
I had the same problem on a project I was working on, I fixed it thus:
#sidebar{
min-height:100%;
height:auto !important;
height: 100%;
//add other styling needed
}