I'm trying to split a div in two side by side divs. I know that has several examples here, but I already searched and not found one that permit that the divs take all available space in vertical, without any content.
Take a look http://jsfiddle.net/kpDDM/3/
To set a percentage height to your divs, their parent element must have a specific height. In this case it appears you want it based on the viewport height. To achieve this, every ancestor div must have a height of 100%:
*, html, body, .parent {
height: 100%;
}
JS Fiddle: http://jsfiddle.net/kpDDM/6/
Add within your div tags. Because they're 100% rather than fixed pixels, they need something inside to make them visible.
If you want to make the div tags 100% of the page, then you need to state the page is 100% (so the div tags understand what 100% is).
* { height:100%; }
Changing the body and html tags to 100% is not necessary.
Your parent divider takes a %height even though it's parent container, body, does not have an explicit height amount. This infers that your parent divider overrides with height:auto instead, leaving you without the height you wish.
You'll need to declare a fixed height for parent if you wish for this to work. Modern browsers today do not support default explicit height amounts for the parent body.
Thus, you'll need to make sure you explicitly define your html and body dividers heights like so:
html, body {
height:100%;
}
Enjoy and good luck!
Related
I've got a Quasar layout, and a component that I need to fill 100% of the height of the q-page-container element. The problem is that the container does not fully expand to cover the entire height (unlike the drawer, which, using absolute positioning, does).
All CSS-tricks I've seen to tackle this problem interfere with the properties of the parent containers, which I'm reluctant to do to make sure I don't break any properties necessary for internal Quasar layout. Setting the child div of the container to height: 100% has no impact, setting it to an absolute value such as 100px does correctly set the height, but I need it to adapt to the browser viewport.
I've set up a fiddle to illustrate the problem here.
In this case I'd like #troublemaker to fill entire height of its container - or rather, its grandparent minus the header height, since the parent container simply expands to whatever content is inside.
PS: CSS layout and positioning have always seemed counter intuitive to me, so if anyone has some good advice on resources to learn how to better understand the logics of it I would appreciate it immensely!
If you have a div inside a q-page, I found the proper way to do this is to let the div inherit the min-height CSS property from the q-page component.
I updated the fiddle to show it: https://jsfiddle.net/u39qbrpj/4/
#troublemaker {
min-height: inherit;
background-color: green;
}
I think q-page-container need a q-page.
So just replace your div by a q-page and it's work.
here is your fiddle fixed: https://jsfiddle.net/uab1rnjh/2/
Or if you really want to work with a div.
You can do the trick with css: height: calc(100vh - 50px);
Here is your fiddle with a div: https://jsfiddle.net/yghL6so8/2/
In the documentation, you can see QPageContainer encapsulates a QPage.
at: https://quasar.dev/layout/page#QPageContainer-API
Using a q-page inside a q-page-container is certainly the most common way. Per the doc a q-page must be in a q-page container. However, if you want to put a div in a container and have it fill the container you can use class="fit" and the div will fill the entire container.
I have the following div with these two identifiers:
.locations_wrapper
and
#tenn_location_wrapper
the height of the latter is set to 600px and the height of the former is set to 500px. I have set overflow-y:hidden to each div identifier and yet, when the div is rendered in Chrome, the height is 2215px. Is there any way to keep it from expanding to this height and adhere to the asigned height values?
Here is a fiddle with the HTML and CSS:
https://jsfiddle.net/ft74v68f/2/
N.B. the fiddle does not totally illustrate the problem as the Bg image, which is of a size 2048px * 1365px, is not rendering.
my <body> tag ends in the middle of its child, locations_wrapper. However when I increase the height of the body element such that it doesn't overflow, the heights of its children are still not enforced.
The issue lies with your
#tenn_location_wrapper {
display:table !important
}
.locations_wrapper {
display:table !important
}
You replace this by display:block, and you'll see it's fixed. Only use tables for using tabular data, as using them to style your page leads to a lot of issues.
When looking at other people's code (or many CSS resets), I see the html element addressed with basic styling (like height: 100%) and sometimes I see it ignored completely. In my experimentation there is no difference, but I am not sure if I am missing something.
In this post they give the example of
html,body{
min-height: 101%;
}
to keep scrollbars visible (but no other definitive answer). Other than a hack like this, is there any specific reason to style the html element?
Well the major reason i can think of is that, for specifying height in % the elements parent needs to have a height set explicitly.
Assume you've a container <div> which you need to be of 100% height and responsive. simply applying height:100% won't work unless you specify a height for it's parent <body>.
Hence we'll apply height:100% for the <body> - Now, this won't work since <body>'s parent doesn't have a height set explicitly - which is our <html> element.
Hence we apply
html{
height:100%;
}
...!
This is not required if your design is not responsive , i.e if you're setting fixed dimensions in pixels
This is used for making height:100% relative to the viewport height.
As I understand it, it is the html element that displays scrollbars. So if you don't want to display scrollbars at all for some reason you would need to hide overflow on that element.
More information about the html element here
I have overflow-x:hidden placed on the body tag of my page so that any content extending beyond the window will not be visible. No scroll bars show up, however, I can still scroll to the left / right to see the content (kinda defeats the purpose of overflow-x).
-ms-overflow-x: doesn't fix the problem either.
There is a wrapper 900px;
Inside the wrapper, there is a div inside:
width:100%;
padding-right:300px;
position:absolute;
left:200px;
I would like the inner div to hang over the right side of the window without causing it to scroll (and leaving a 200px space the its left).
Any help? Thanks!
Since the width of the div is 100%, there should never be an overflow, since the div will always fit 100% of the viewport (assuming you haven't changed the size of your body tag).
As for the padding, the padding is added on after the width, so you're saying the div is 100% of the width of it's container (the body tag), and the padding is an additional 300px to the right, which will be invisible as it's out of the viewport.
You might want to try giving the div an explicit size width and experiment that way.
It may help to see an example of your markup as well, to get an idea of what you're trying to achieve.
More HTML/CSS would be useful, but given what you have right now, my first thought is that your wrapper is still set to position: static (the default for HTML elements).
If you add position: relative to your wrapper, it will contain the absolutely-positioned element within it, and should constrain it to the overflow restrictions.
Additionally, you may want to look into the box-sizing property and how the W3C box model works. In short, your padding is adding to the width of the element, so it's actually (100% + 300px), which results in a size that is larger than the container.
If you don't want to mess with box-sizing, you can also add max-width: 100% to your absolute div to force it to not grow out of its container.
There's lots of questions on SO related to this, but the ones I scanned are all for detailed specific situations. What I want to know is, at a conceptual level, what does it mean to say:
<div style='height:100%'>
How high is 100%? 100% of what?
[EDIT]
Followup question: If 100% represents the height of the parent, but the parent is <body> and has no height other than the height of the div, then what does it mean? It seems recursively defined.
100% of the parent container's height.
See here: http://jsfiddle.net/6VRn6/
If you want to use this method to make the div 100% of the page's height, you have to specify the height as 100% of the body and html as well.
body, html {
height: 100%;
}
When you don't specify a html or body height, their heights are the sum of the heights of the elements in it.
Updated demo showing this. We have a 200px div with 2px borders totaling 204px and then a 40px status div. The body height should be 244px. Now, if you add the CSS above to the page, the height will be the height of the bottom right quadrant of the jsfiddle. Try adding it and running the code again. Then resize the result pane and run it again to see the height change accordingly.
100% of the offsetParent. In most cases, that's the document. It can also be an element with position other than static, or a component of a table.
The height:100% means :
Make that div big as the parent!
It just means 100% of the div or class or tag it is enclosed within. Try having an idea somewhat this:
{--parent loop
{
..height 100% of above loop
..
}
}