I have the following:
<div class="row">
<div id="left">
<div class="content"></div>
</div>
<div id="right">
<div class="content"></div>
</div>
</div>
#media (min-width: 768px) {
#left {
position: absolute;
top: 52px;
bottom: 0;
left: 0;
width: 25%;
overflow-y: auto;
height: calc(100% - 62px);
}
#right {
position: absolute;
top: 52px;
bottom: 0;
right: 0;
width: 75%;
overflow-y: auto;
height: calc(100% - 62px);
}
}
When I inspect the DOM, the height of the content classes is as expected, but the left and right divs have zero height and thus nothing shows on the page.
Removing the overflow-y property fixes the problem but I do need scrolling in case the div exceeds the height of the screen.
I tried the "clearfix" wrapper around the left and right divs but that doesn't seem to do anything.
Could someone explain why is the parent class not inheriting the height of its content?
This is only an issue in Firefox by the way, Chrome seems to work fine.
The problem appears to not come from the overflow-y, but rather that you have missed out the closing quotation mark in <div class="row">. Failure to include this closing quotation mark actually causes the <div> on the left to not display. My guess is that Chrome automatically corrects this, and Firefox does not.
I've added in some background colours, and created a JSFiddle showcasing this problem here, and another fixing this problem here.
Hope this helps! :)
If you use a height setting containing percentage values for an element (as you did), the parent of that element needs a heightsetting too. If you mean 100% - 62px of the window height, you have to add height: 100% to each parent, grandparent etc. - a percentag-based settong needs a reference in the parent element. In you case that would be
html, body, .row {
height: 100%;
}
#media (min-width: 768px) {
html,
body,
.row {
height: 100%;
}
#left {
position: absolute;
top: 52px;
bottom: 0;
left: 0;
width: 25%;
overflow-y: auto;
height: calc(100% - 62px);
}
#right {
position: absolute;
top: 52px;
bottom: 0;
right: 0;
width: 75%;
overflow-y: auto;
height: calc(100% - 62px);
}
}
<div class="row">
<div id="left">
<div class="content"></div>
</div>
<div id="right">
<div class="content"></div>
</div>
</div>
Related
I am trying to put a position:fixed div inside an another div. I want a fixed div which has a width:100%; so it will be great for mobile and desktop at the same time.
Here is my JSfiddle
SF wants some code:
<div id="container">
<div id="item">This div is good div</div>
<div id="fixed">Right side of this div overflow its parent!!! </div>
</div>
An element with position: fixed; ignores the parent size because it is relative only to the viewport:
MDN:
Fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the viewport.
You can:
Try giving it position: absolute; and set the container to position: relative;.
Use position: fixed; and set the size explicitly.
You can use the calc() method to adapt the viewport size. Just subtract right and left margin from the 100%:
Edit: I added a min-height to the body to see the "fixed-effect" on scrolling
body {
margin: 0;
min-height: 1000px;
}
#container {
margin: 10px;
background: black;
color: white;
}
#item {
height: 50px;
width: 100%;
}
#item {
background: blue;
}
#fixed {
height: 50px;
width: calc(100% - 20px);
background: green;
position: fixed;
}
<div id="container">
<div id="item">Normal div</div>
<div id="fixed">Fixed div</div>
</div>
Lets assume for some reason I can not change the HTML, neither use JavasScript. Lets assume the position of #content_actual depends on the height of #element. #element has a flexible height.
Is there a solution for this problem?
HTML:
<div id="content">
<div id="element">ABCDE</div>
<div id="content_actual">FGHIJ</div>
</div>
CSS:
#content {
width:960px;
margin: 0 auto;
}
#element {
// width: 100% of body width
// position: everything but position absolute or fixed
}
Similar to Paulie_D's (apparently we were sharing brainwaves) but this uses percentage to counter the container width. No idea how well supported this would be:
https://jsfiddle.net/7w2cwqfq/4/
<div id="content">
<div id="element">ABCDE</div>
<div id="content_actual">FGHIJ</div>
</div>
#content {
width:200px;
margin: 0 auto;
background: yellow;
}
#element {
position: relative;
left: calc(-50vw + 50%);
width: 100vw;
background: red
}
A combination of relative positioning, viewport units and calc.
Codepen Demo
NOTE: this breaks as soon as the viewport is less than the container width. Media queries would be required at that point.
#content {
width: 480px; /* numbers changed for this Snippet */
margin: 0 auto;
background: green;
padding: 50px;
}
#element {
height: 50px;
line-height: 50px;
width: 100vw;
position: relative;
right: calc(50vw - 240px); /* second value 50% of container width */
background: lightblue;
}
<div id="content">
<div id="element">ABCDE</div>
<div id="content_actual">FGHIJ</div>
</div>
It should also be noted that the container cannot have overflow:hidden for this technique to work.
i'm trying to make the left and right graphics of a div to take the whole height of the browser window.
At first i tried something like this https://jsfiddle.net/jr6av8n5/2/
But since the 100% height of the columns takes up the height of the parent div they do not take up the whole screen space.
<div id="main">
<div id="leftLayoutCol">
</div>
<div id="rightLayoutCol">
</div>
<h1>TEST</h1>
<h1>TEST</h1>
<h1>TEST</h1>
<h1>TEST</h1>
<h1>TEST</h1>
</div>
h1 {padding:0px;margin:0px;}
#main {
position: fixed;
width: 55%;
height: 100%;
max-width: 1200px;
margin-left: 50%;
left: -25%;
background-color: grey;
}
#leftLayoutCol {
display: inline-block;
height: 100%;
position: absolute;
width: 40px;
left: -40px;
background-color: green;
}
#rightLayoutCol {
display: inline-block;
height: 100%;
position: absolute;
width: 40px;
right: -40px;
background-color: green;
}
Then i tried something like this https://jsfiddle.net/4d8d8tds/2/
This is closer to what i want to achieve but it's not a solid solution since if the browser window is resized the #main div is not horizontally centered anymore together with some other issues.
I already tried giving the body 100% height and it works except for the fact that it takes into account the height of every other page element and sums it up to the body heght making a scrollbar appear and generally looking bad (everything gets shifted down).
Any suggestions? (possibly not with css3 since it will need to run on older browsers)
Thanks
The demo below shows a possible solution for it, with fixed position of header and footer, and main takes 100% height of the window. Due to the unpredicted height of header and footer, I added a bit of javascript to do to the calculation.
var callback = function () {
var windowHeight = $(window).height();
var headerHeight = $("#header").height();
var footerHeight = $("#footer").height();
var mainHeight = windowHeight - headerHeight - footerHeight;
$("#main").css({
"min-height": mainHeight + "px",
"margin-top": headerHeight + "px",
"margin-bottom": footerHeight + "px"
});
};
$(document).ready(callback);
$(window).resize(callback);
body, h1 {
margin: 0;
}
#header, #footer {
background: green;
position: fixed;
z-index: 1;
left: 0;
width: 100%;
}
#header {
top: 0;
}
#footer {
bottom: 0;
}
#main {
background: silver;
position: relative;
width: 50%;
height: 100%;
max-width: 1200px;
margin: 0 auto;
}
#left, #right {
background: navy;
display: block;
width: 40px;
height: 100%;
position: absolute;
top: 0;
}
#left {
left: -40px;
}
#right {
right: -40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">header</div>
<div id="main">
<div id="left"></div>
<div id="right"></div>
<h1>TEST</h1>
<h1>TEST</h1>
<h1>TEST</h1>
<h1>TEST</h1>
<h1>TEST</h1>
<h1>TEST</h1>
<h1>TEST</h1>
<h1>TEST</h1>
</div>
<div id="footer">footer</div>
Also available on JSFiddle, so you can see it in action for different window sizes.
I don't know if I understood well your question.
seems to me that if you add 100% height to both html and body in your first Fiddle it works just fine.
maybe you have seen scroll bar because by default body has margin unless set to 0.
However these days I always include in my projects, specially when working with height 100%, this:
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
so paddings and borders will never mess up any of your elements. I recomend you to use it.
FIDDLE
Edited: if you have elements outside the 100% height container you can subtract the set height height: calc (100% - 150px); asuming 150px is the total height of those elements combined
I have a three-column layout that takes up 100% width and height of the browser (with padding). This layout contains two columns which also take up 100% height and should scroll independently.
Here is a jsfiddle: http://jsfiddle.net/KdZ9A/2/. Here is how it looks in Chrome (desirable -- individual columns scroll):
and Firefox and IE (undesirable -- body is scrolling):
This works perfectly in Chrome; however, the in Firefox and IE (10), the entire page scrolls instead of individual columns scrolling. I only want the columns to overflow and scroll -- not the body. Any idea how to make this work in Firefox and IE?
I've also tried a bit different approach using absolute positioning of the columns' contents: http://jsfiddle.net/KdZ9A/3/.
Here is the HTML I am using:
<div id="container">
<div id="inner">
<div id="palette">palette</div>
<div id="list">
<div class="content"></div>
</div>
<div id="editor">
<div class="content"></div>
</div>
</div>
</div>
I'm using absolute positioning to achieve 100% height and then display of table and table-cell inside that to achieve 100% height of the columnns:
* {
padding: 0;
margin: 0;
}
html, body {
width: 100%;
height: 100%;
}
body {
position: relative;
}
#container {
background-color: #f1f1f1;
position: absolute;
left: 20px;
right: 20px;
top: 20px;
bottom: 20px;
}
#inner {
display: table;
height: 100%;
}
#inner > div {
display: table-cell;
}
#palette {
min-width: 180px;
max-width: 180px;
width: 180px !important;
background-color: pink;
}
#list {
width: 55%;
min-width: 350px;
background-color: cyan;
}
#editor {
width: 45%;
min-width: 400px;
background-color: magenta;
}
.content {
overflow: auto;
height: 100%;
}
I was 5 minutes from giving up and HOLY CRAP...I GOT IT WORKING
http://jsfiddle.net/gFX5E/15/
This is based on the different approach I mentioned. I needed to wrap .content divs and make the wrappers position relative. I also added some headers to the columns.
HTML:
<div class="content-wrap">
<div class="content">
...
</div>
</div>
CSS:
.content-wrap {
position: relative;
height: 100%;
}
.content {
overflow: auto;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
}
Seems to work in Chrome, Safari, Firefox, and IE8+.
And here is a more semantic HTML5 version which also adds a header to the top: http://jsfiddle.net/gFX5E/20/. I believe this will require use of html5shiv to work in IE8.
If you are willing to settle for a fixed total width, here is how:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box; /* makes filling up easier */
}
html, body {
height: 100%;
}
#container {
position: relative;
width: 980px;
height: 100%;
margin: auto;
background: grey;
}
#palette {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 800px;
background: pink;
}
#list {
position: absolute;
left: 180px;
top: 0;
bottom: 0;
right: 450px;
background: cyan;
overflow-y: auto;
}
#editor {
position: absolute;
left: 530px;
top: 0;
bottom: 0;
right: 0;
background: magenta;
overflow-y: auto;
}
</style>
</head>
<body>
<div id="container">
<div id="palette">Palette</div>
<div id="list" class="content"></div>
<div id="editor" class="content"></div>
</div>
<script>
$(function() {
for (var i=0; i<20; i++) {
$('.content').append('<p>Lorem ipsum [truncated for SO]</p>');
}
});
</script>
</body>
</html>
Demo on this Codepen: http://codepen.io/anon/pen/aqgCm?editors=100.
This is a pretty old post, but I thought I'd comment.
If you display: flex instead of display: table in your 1st example that should fix the issue.
Also setting your scroll container height to 100vh will also do the trick.
You have to understand that the browsers apply scroll only when they understand the size( i.e. height and width) of the content is greater than the size specified for it. In your case, the height you have specified for the div is 100%. This effectively tells the browser to keep increasing the size of the div till all the content fits in completely. Hence, this creates the situation where scroll isn't needed as the browser would 'fit' the entire content within this div.
So if you want the div (or the paragraphs contained in it) to be scrollable, then you would have to specify the height and then tell the browser to provide a scroll for the content that won't fit in the specified size.
I am not sure if you want the individual 'paragraphs' to be scrollable or the entire div( which contains these paragraphs) to be scrollable. In either case, you would need to provide a fixed height for the scroll to be useful. Your paragraph tag would need to have the following CSS applied to it :
p {
height: 200px; /*Some fixed height*/
overflow-y: scroll;
}
Here's an example of this: http://jsfiddle.net/y49C3/
In case you want your div called 'content' to be scrollable (as opposed to the paragraphs), then you would have to apply the aforementioned CSS to the div instead.
.content {
overflow-y: scroll;
height: 500px;
}
You can see that here: http://jsfiddle.net/qF7Mt/1/
I have tested this in Firefox (29) and IE 10 and it works fine!!!
Hope this helps!!!
I want the "blue" container to always be 70px high, while the previous "green" div always max out the height available when the div is resized with javascript.
I've played around with it for a while without finding a proper solution. Help will be appreciated.
As promised, here's my answer.
absolute inside relative positioning is the easiest way to do this.
Live Demo
HTML:
<div id="parent">
<div id="left">height: 100%</div>
<div id="right">Content</div>
<div id="rightFooter">height: 70px</div>
</div>
CSS:
#parent {
position: relative;
height: 200px
}
#left, #right, #rightFooter {
position: absolute
}
#left {
width: 200px;
top: 0;
bottom: 0;
left: 0
}
#right {
top: 0;
right: 0;
bottom: 70px;
left: 200px;
overflow-y: auto
}
#rightFooter {
height: 70px;
right: 0;
bottom: 0;
left: 200px
}
Would something like this work?
Live Demo
Added an animation of the height so you can see the content extending.
Markup
<div id="parent">
<div class="left">
Lefty
</div>
<div class="right">
<div id="rightContent">
right Content
</div>
<div id="rightFooter">
Right Footer
</div>
</div>
<div class="clear"></div>
</div>
CSS
#parent{
height:300px;
}
.left{
float: left;
width: 33%;
background: red;
height:100%;
}
.right{
float : left;
width: 66%;
height:100%;
}
#rightContent{
height: 100%;
background: blue;
}
#rightFooter{
background: yellow;
height: 70px;
float: right;
width: 100%;
margin-top: -70px;
}
.clear{
clear:both;
}
Bah, before the comments come this is a partial solution, the text for the content area will bleed into the footer... looking at a solution for this, or someone else might be able to modify my markup/css to account for that.
Made an example for you here :)
you need to have a left floated div for the left content and a wrapper for the two other right divs, also floated left.
Take a look :)