Make div child scrollable inside 100% height parent div - css

I've tried to find a solution to this seemingly simple issue, but with no luck. I'm using AngularJS and Angular Material.
index.html
<div class="parent" layout="column" layout-fill ng-view>
</div>
Example HTML template:
<div class="child" layout="column" layout-fill>
<div flex="20">
Some content
</div>
<div flex>
Some more content
</div>
</div>
(There's nothing in the parent and child CSS classes, used just for name reference here)
In case the content is shorter than the screen height, I want both parent and child divs to be full height and the content divs to expand according to the flex properties. The layout-fill directive from Angular Material adds the 100% height, so this is currently working.
In case the content is longer than what can be displayed withing the screen height, I would like the child div to be scrollable.
My idea was to use media queries to append class properties to the child div in case height is below say 400px.
#media screen and (max-height: 400px){
.child{
height: 400px;
overflow-y: scroll;
}
}
Unfortunately this doesn't work. The child height is the same as the parent (screen height). When inspecting the element (Chrome) it says that css height is 400px, but the computed height is not.
I really don't understand that.
JSFiddle
Any ideas?

I would change the settings in the media query to
child {
min-height: 400px;
overflow-y: visible;
}
That forces it to be as high as its content and at least 400px, which will scroll in the body.
https://jsfiddle.net/zy0o7jn6/1/

Related

Flexbox background does not cover children on horizontal overflow

I have a parent container that has a (priori unknown) number of children that have a minimum width. When I resize the browser past the point of children shrinking, the parent background shrinks with the window, and does not cover children.
.row{
display:flex;
background-color:#fcc;
background-size:cover;
}
.row:nth-child(odd){
background-color:#fbb;
}
.child{
min-width:150px;
border:1px #ccc solid;
flex-grow:1;
}
<div class="row">
<div class="child"> content </div>
<div class="child"> content </div>
<div class="child"> content </div>
</div>
<!--more rows follow-->
jsfiddle
How would I go about ensuring the parent background covers all the children?
I tried putting width:100%, background-size:cover on the .row element. Also tried wrapping everything in a container and setting overflow:auto on that.
The only way I can sort of get it work is if i put overflow:auto on the .row element, but then it makes each row horizontally-scrollable independent of others.
I already saw this post, but it's not exactly what I need - I'm not wrapping any flex-items, the point is for them to stay the way they are.
I also read this article, but I can't see anything that can help with my problem.
You probably want display: inline-flex;
Check: https://jsfiddle.net/n5s3n3g8/1/

extend div beyond bootstraps container

I have a set up in wordpress using bootstrap what follows:
<div class="container">
<div class="row">
<div id="NEEDS TO BE FULL WIDTH>
</div>
</div>
</div>
I would like the background of the "NEEDS TO BE FULL WIDTH" div be full browser width but not sure how. If I make it more the 100% width it makes a horizontal scroll. Any ideas?
You can have multiple .container elements inside your html. If you change the .container into a container-fluid the content of the container will take up 100%
If you only want the background to be full width, but you want the content to be constrained by the .container (at most about 1140 pixels wide) then surround the .container with another <div> and put the background-image on that element.

css 100% width when horizontall scrollbar

I want to have a header with 100% width,
in some cases there is a horizontal scrollbar and that
causes the div to cover the visible area and not the whole
parent element.
.cont {
width: 100%;
}
http://jsfiddle.net/BhRdV/1/
There are certain cases, where even if you don't set width to DIV, it will still scale 100%.
Also, please be clear with ur question.
<div style="width:1200px;">
<div style="width:100%;">Tadda</div>
<div>Tadda 2</div>
</div>

HTML5 elements only stretch to size of window

I am putting together a HTML5 page. I notice that divs without specified widths within elements such as "header" and "footer" only fill the width of the window. So, if for example you have:
<header>
<div id="header-background" style="background: #ddd">
<h1 style="width:960px">Hello World</h1>
</div>
</header>
And you reduce the size of the window to below 960px (e.g. 600px) and scroll horizontally, the "header-background" will only stretch to 600px, and to the right will be a white space.
You can see this in action even at stackoverflow.com
Is there a way around this?
Any block level element will take up 100% of the page width by default. If you have a width that you can't ( or don't want to ) go under, then you can use min-width
header {
min-width: 960px;
width: auto;
}

Child div should be as high as parent div

I need a child div to be as high as its parent, but I do not know the parent's height. It can change.
Setting "height: 100%" does not work, as the div will take the height of the entire page.
This is the layout of the divs:
<div id="deelnemersballoon">
<div class="balloonarrow"></div>
<div class="balloonborder">
<div class="ballooncontent">
<div id="aantaldeelnemers">1</div>
<div id="deelnemertekst">deelnemer werd toegevoegd.</div>
<div class="clear">
<button>Add something</button>
</div>
</div>
</div>
</div>
.balloonarrow should be as high as #deelnemersballoon
set parent div height in pixels (for ex height:100px ) and set child as 100% (height:100%) . Child only occupies parent div width fully
I never had much luck with height: 100%; even when playing by the rules. What does .balloonarrow do? If you're just trying to snap a graphic to the bottom of the div, you can try position: absolute; and bottom: 0px;, as long as #deelnemersballoon is set to position: relative;.
If you're just looking to make a solid/patterned visual contained by .balloonarrow, you're better off making a stretch image: create an image 3px or 4px tall, make it the background of #deelnemersballoon, and set it to repeat-y. Quick and dirty way to make a 100% height sidebar.
Hope this helps, can't tell much more without seeing your css.
A child div will not take up 100% of its parent if it has something in the markup before it:
Html:
<div id='parent'>Parent (Mark up before child)<div id='child'>Child</div></div>
css:
#parent {background:blue; height:500px; color:white}
#child {background:red; height:100%}
You can find a working example here. (Removing the text from the #parent div will make the child fill it 100%)
http://jsfiddle.net/wcprA/2/
The same thing applies if you have markup after the 100% child aswell, as seen here
http://jsfiddle.net/wcprA/5/
Try adding position:relative to the parent div. Then the 100% on the child div should reference the parent div. In general 100% height is going to look for the nearest parent element that has a position set on it - and if it doesn't find any it will eventually find the body tag and use that.

Resources