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.
Related
This question already has an answer here:
Why does height: 100% on a child element not apply when the parent element has a min-height/max-height value but no height value?
(1 answer)
Closed 6 months ago.
I know that in CSS a container with height: 100% should adapt the height of its parent container.
However, what happens if I put an element inside a container that has only a max-height property?
In this case, my container does not appear at all. You can find my experiment in this code pen: https://codepen.io/web265p3/pen/eYMwjgd
<body>
<div class="outer">
<div class="inner">
<div class="inner-inner"></div>
</div>
</div>
</body>
And the CSS:
.outer {
background-color: yellow;
height: 1000px;
width: 300px;
}
.inner {
min-height: 500px;
width: 200px;
background-color: green;
}
.inner-inner {
height: 100%;
width: 100px;
background-color: aqua;
}
You can find a div with a class .inner-inner there that has a height of 100%.
Its contained in another element with a min-height of 500px.
I expected the .inner-inner to be 500px high, but this is not the case. Its height is 0.
Okay, so probably the height of 100% only inherits if there is a real "height" property on the parent.
And indeed, if I add a height the inner-inner becomes visible, but not as expected.
It now fills the parent completely and does not inherit the height property, but suddenly the min-height!?? You can find this here: https://codepen.io/web265p3/pen/VwXJBQG
This is a counter intuitive behavior for me. Can you explain why the browser behaves so strange and inherits a min-height after my change?
The height: 100% attribute's percentage is calculated based on the containing block's height. And if that containing block doesn't have a specified and fixed height, then the percentage is invalid, and behind the scense it will default back to auto (which if the inner has no content, it will be zero).
So, for percentage height to work on an in-flow child, the parent must have a set height.
In your example, just setting a display method to the outer container, and then setting height to fill parent will fix your issue, here's an updated CodePen.
* {
box-sizing: border-box;
}
.outer {
background-color: yellow;
height: 1000px;
width: 300px;
}
.inner {
min-height: 500px;
width: 200px;
background-color: green;
display: flex;
}
.inner-inner {
height: fill;
width: 100px;
background-color: aqua;
}
<body>
<div class="outer">
<div class="inner">
<div class="inner-inner"></div>
</div>
</div>
</body>
max-height in the parent element isn't a sufficient basis for a percentage height in the child. Percentage height settings require a height setting on the parent element (and if that one is a percentage value, its parent again requires a height setting, and so on up to the html element...).
This is actually a bug: https://bugs.webkit.org/show_bug.cgi?id=26559 (obviously still not fixed)
There are several ways to get around this. For example:
.inner -> position: relative
.inner-inner -> position: absolute
OR
.inner -> height: 1px; min-height: 100%
I am trying to put a div on the left side of my webpage that has not to be fixed and has to be 100% of the height and 30% width. I mean, that if you scroll, it will be scrolled also and it will not be fixed in the same position all the time.
The problem that I am having it is that when I put height: 100%; it does not cover the height that I am indicating to him. It only covers the full height when I set position:fixed but never when I set it to static, absolute or relative.
What I though it is that it could be that I had to set width: 100%; and height: 100%; to the <html> tag but it does not seem to have any difference if I compare it with <body> tag (I know there are differences between both tags but I do not know if in this case they will be aplied, I think no).
Here is my html code:
<html>
<head>
</head>
<body>
<h1>This is a prove</h1>
<div id="proveDiv">
<h1>Hello</h1>
</div>
</body>
</html>
Here is my CSS code:
html{
/* position: relative; I comment these lines because I saw that there are not any effect
width: 100%;
height: 100%; */
}
body{
position: relative;
width: 100%;
height: 100%;
}
#proveDiv{
position: fixed;
width: 30%;
height: 100%;
background-color: red;
}
Here is the fiddle in which you can see the effect. Just try to change the position attribute on proveDiv id css and you will se what I refer to.
I am stuck here and I cannot find any solution by myself or in SO. Am I missing something?
Thanks in advance!
Set the min-height of the div to view-port height like min-height: 100vh;. Updated fiddle
#proveDiv {
width: 30%;
min-height: 100vh;
background-color: red;
}
Based on your description, this is the working demo that I came up with.
http://codepen.io/BenCodeZen/pen/JXLbjN
The solution is based on a display: flex; on a parent container and defining the height of the element using height: 100vh; instead of 100%. By using flexbox, it will allow you more control over the layout for responsive design.
Let me know if you have any questions.
The reason why this happens is because, when you use the attribute fixed, for some reason, the div's height will increase because it's inherited by default from its container. In this case, when your div is fixed and its height is set to 100%, the div takes the full height of its container which is the body.
PS: In case you want the div to have its initial height, you can use position:initial.
On the other side, using position:relative is your best option.
By default, the div will have its own initial height which depends on its content. When you have more text inside your div, it will automatically increase its height.
To solve your problem, use a relative position and set the height as you want. (100% will make the div take the height of the body)
Note that it is important that you set both the body & html tag's height otherwise it won't work. (If you need further explaination, just comment below)
This is how your CSS should be:
html,body{
width: 100%;
height: 100%;
}
#proveDiv{
position: relative;
width: 30%;
height: 100%;
background-color: red;
}
If you have any questions, comment below.
I'm using vh to set height of divs and vw to set their width.
Is there any way to prevent a DIV from becoming too small when resizing the browser window using pure HTML and CSS only?
You could do that in css:
div {
min-width: 200px; /*Says that the every div has at least to be 200px width*/
min-height: 200px; /*Says that the every div has at least to be 200px height*/
}
<div id='minWidth'></div>
#minWidth{
min-width: 200px;
}
For more information check out:
http://www.w3schools.com/cssref/pr_dim_min-width.asp
this can also be set for height
#minHeight{
min-height: 200px;
}
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 a website with two columns, within a wrapper div.
The wrapper has the same height as the tallest div by giving floating everything and giving the wrapper height:100%.
Here's my problem: one of the columns is a div with overflow:scroll and several images in it. I tried to set its height to 100%, thinking that it would take up the full height of the wrapper. Instead, it became the height of all the images on top of each other.
If I set the height of the column with images (#rightbox) to a specific height in pixels, this happens.
I want it to have the same height as the other div with text, so I set its height to 100%. Then this happens.
How can I make the two columns have the same height?
EDIT: I forgot to mention that the amount of text varies, so I can't define a specific height for the wrapper.
You cannot define height as 100% unless your parents provides an actual heights.
#wrapper {
height: 800px;
}
/* Now you can make the columns inside take the full height of its parent *?
#wrapper .columns {
height: 100%;
overflow: auto;
}
Note: if the wrapper sits inside the body element then you will need to set html,body { height: 100%; } before the wrapper can be set to 100%
Given the limited amount of code provided... here is a pure css solution.
http://jsfiddle.net/rlemon/Q7MvS/
.wrapper {
height: 600px;
width: 800px;
}
.panel {
float: left;
width: 400px;
height: 100%;
}
.panel.right {
overflow: scroll;
}