Yes, another annoying overflow question on css...
Here is my case:
HTML
<div id="parent">
<div id="child1">
Some short content that may take a line or two.
</div>
<div id="child2">
Some short to very long content that may overflow parent div...
</div>
<div>
CSS
#parent {
position: absolute;
height: 100%;
width: 100px;
}
#child1 {
}
#child2 {
overflow: auto;
}
As you can see I want child2 to overflow the parent div when needed. But as I don't know the exact height of child2 (because child1 may vary a bit) I'm not able to do some absolute positionning as I'm used to with bottom: 0px and top: ???px.
Some JSFiddle to play with : https://jsfiddle.net/6r3ojecL/1/
In the worst case I will use some ugly JS code snippet, but I'll be happy if I could to master css once again. :)
Thanks!
A solution using display: flex. Check the updated fiddle
#parent {
display: flex;
position: absolute;
height: 50%;
width: 100px;
border: 1px solid red;
background-color: red;
flex-direction: column;
}
#child1 {
height: 50px;
background-color: yellow;
}
#child2 {
flex: 1;
background-color: green;
overflow: auto;
}
<div id="parent">
<div id="child1"></div>
<div id="child2">
child 2 content child 2 content child 2 content child 2 content child 2 content child 2 content child 2 content child 2 content child 2 content
</div>
</div>
Set the overflow on the parent and not on the child (updated).
CSS
#parent {
position: absolute;
height: 100%;
width: 100px;
overflow: auto;
}
#child1 { }
#child2 { }
Related
It seems so simple, but I wrap my mind about it and googled a lot but couldn't find an answer:
Container with two vertical rows, one has height defined in pixels (header), and the other has image that should stretch as much as remaining height (slider div). The problem is that this height of header is dynamic (as in unknown) and we can't use that value in defining CSS of container or slider div.
How do I solve it without javascript?
<section>
<header style="height:40px; background: yellow;">header</header>
<div id="slider">
<img src="http://amanita-design.net/img/home-news/botanicula.jpg" />
</div>
</section>
section {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 400px;
background: green;
}
#slider {
height: 100%; /* this is wrong; how to set height to stretch element? */
}
img {
width: 100%;
height: 100%;
}
Header is set to 40px just for the sake of the example. It could be any other value, but the CSS definition of other elements shouldn't be aware of that, because it's dynamically loaded 3rd party component with inline CSS.
Also, slider div is a complex slider (Swiper) that renders code with bunch of nested divs but I need to use exactly that one.
But this DOM structure should be rough sketch of my case.
Example is here: https://jsfiddle.net/snaokLxd/3/
Set the parent to flex with #slider set to flex-grow: 1 (or flex: 1 0 0 for short)
section {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 400px;
background: green;
display: flex;
flex-direction: column;
}
#slider {
flex: 1 0 0;
}
img {
width: 100%;
height: 100%;
vertical-align: top;
}
<section>
<header style="height:40px; background: yellow;">header</header>
<div id="slider">
<img src="http://amanita-design.net/img/home-news/botanicula.jpg" />
</div>
</section>
Flex example below:
* {
margin: 0;
}
section {
height: 100vh;
width: 400px;
background: green;
display: flex;
flex-direction: column;
}
#slider {
flex-grow: 2;
}
img {
display: block;
width: 100%;
height: 100%;
}
<section>
<header style="height:40px; background: yellow;">header</header>
<div id="slider">
<img src="http://amanita-design.net/img/home-news/botanicula.jpg" />
</div>
</section>
Also on JSFiddle.
I have a series of divs with z-index:20 (this is a must be for visual styling reasons), but inside one of them, I have a datepicker which stands as position:absolute floating above everything. I've assigned z-index: 1000 as a great value in order to achieve this.
I discovered the inner z-index this doesn't work because of the parent container. Is there such a hack to workaround this ?
The parent container must have such z-index in order to be above a sibling div, but the datepicker, which is inside one of the boxes, must be on top of everything, and now it is hiding under the next box.
This is the codepen with an actual example: http://codepen.io/anon/pen/jWZMPw
The problem is that .box creates a stacking context because it's a positioned element with non-auto z-index.
Don't do that. Remove
.box {
z-index: 20;
}
.banner {
padding: 10px;
background: #454545;
position: fixed;
width: 100%;
}
.box {
position: relative;
float: left;
margin-left: 20px;
min-width: 100px;
min-height: 100px;
border: 1px solid #999;
padding: 20px;
background: #45e;
}
.box:first-child {
margin-left: 0;
}
.dtpicker {
background-color: #34ed22;
padding: 20px;
min-width: 100px;
min-height: 100px;
position: absolute;
left: 50px;
z-index: 50;
}
<div class="banner">
Something behind
</div>
<div class="box" >
Box
</div>
<div class="box" >
Box
</div>
<div class="box" >
Box
<div class="dtpicker">
Dt picker
</div>
</div>
<div class="box" >
Box
</div>
I recommend reading What No One Told You About Z-Index.
I currently get the parents div height with: height: inherit;, but when I scale the window down then the parent div is smaller than the container div so overflow: hidden; hides half of the container content.
Is it possible to just do this with css?
This is the code:
<div id="container">
<div class="content">
<div class="wrapper">
Content here
</div>
</div>
#container {
float: left;
height: 400px;
width: 400px;
background-color: red;
}
.content {
float: left;
height: inherit;
width: 90%;
overflow: hidden;
position: relative;
background-color: black;
}
.wrapper {
width: 90%;
height: 900px;
position: relative;
z-index: 99;
background-color: blue;
}
http://jsfiddle.net/orymyjto/1/
You probably use the overflow property to clear the floats, right?
Then change overflow: hidden to overflow: auto.
Set the content div min-height: 400px; (replacing height) So it will never be smaller than the container but can get larger as necessary.
The question is: is it possible? I have a div with relative position. Inside this div, I have another div with position: absolute and top: whatever.
This absolute positioned div overlaps content in parent div without any problems, but another relative position div (outside parent) doesn't even care. Before this question I googled as I much as I could, so I'm for 90% sure that it's impossible, or I'm on a wrong way, but I need to be sure.
Here is an example http://jsfiddle.net/MNLbZ/2/
HTML
<div class="main">
<div class="content">11112222233</div>
<div class="abs"></div>
</div>
<div class="main"></div>
CSS
.main {
background: green;
position: relative;
height: 100px;
width: 100px;
z-index: 100;
}
.content {
position: relative;
z-index: 500;
width: 100px;
}
.abs {
position: absolute;
width: 50px;
height: 300px;
top:0;
right: 0;
background: red;
z-index: 999;
opacity: .5;
}
The z-index of the second .main div must be lower than that of the first div that contains the absolute div:
add a class to the second main
<div class="main">
<div class="content">11112222233</div>
<div class="abs"></div>
</div>
<div class="main second"></div>
then use this style:
.second {z-index:99;}
Example
I've stumbled upon some unexpected behaviour when testing a layout in Firefox. It seems that when a parent is set to display:table-cell and position:relative, its children do not respect the parent width when positioned absolutely and given 100% width. Instead, the child width is set to the parent's parent width. I've recreated this issue with a fiddle:
http://jsfiddle.net/D6Rch/1/
which is structured as:
<div class="table">
<div class="cell-1">
<div class="content-1">this must be positioned absolutely</div>
<div class="content-2">as these divs will be overlapping</div>
</div>
<div class="cell-2">
<div class="advert">fixed width advert</div>
</div>
</div>
.table {
width:600px;
height:400px;
border:3px solid black;
display: table;
position: relative;
table-layout: fixed;
}
.cell-1 {
width: auto;
display: table-cell;
background: yellow;
position: relative;
margin-right:10px;
}
.cell-2 {
margin-right:10px;
width: 100px;
display: table-cell;
background: pink;
position: relative;
}
.content-1 {
position: absolute;
top: 10px;
width: 100%;
background: lightgreen;
z-index: 5;
}
.content-2 {
position: absolute;
top: 50px;
width: 100%;
background: lightblue;
z-index: 5;
}
.advert {
position: relative;
border: 1px solid red;
}
It functions as expected in Chrome & Safari, but not on Firefox. Question is, why does this happen? And is there a workaround for this or should I take an altogether different approach?
Thanks in advance,
This is a known bug in Gecko. See the Gecko Notes here - https://developer.mozilla.org/en-US/docs/Web/CSS/position
So, you'll have to wrap you content divs in another positioned div. Like so
http://jsfiddle.net/D6Rch/4/
<div class="cell-1">
<div class="wrapper">
<div class="content-1">this must be positioned absolutely</div>
<div class="content-2">as these divs will be overlapping</div>
</div>
</div>
.wrapper {
position: relative;
}