This question already has answers here:
Fixed position relative to parent element [duplicate]
(4 answers)
Closed 4 years ago.
Run the snippet below to see what I'm trying to achieve.
The main question is: Is that possible to achieve this without JavaScript?
.container {
display: flex;
width: 400px;
height: 2000px;
background-color: #aaa;
}
.left {
width: 150px;
background-color: lightgreen;
}
.right {
width: 100%;
background-color: lightcoral;
}
.fixed {
position: fixed;
height: 100px;
width: 100%;
background-color: skyblue;
}
<div class="container">
<div class="left">
My width can change anytime.
</div>
<div class="right">
<div class="fixed">
I'm fixed. Scroll the page to verify.<br /> I want to be the same width as my red parent.<br /> Any tips?
</div>
</div>
</div>
You can actually calculate the width it needs to have, based on the widths of the flex items.
The left item is given a width of 150px and the right item 100% (which resolves to 400px). This totals 550px, and that gets squeezed into the 400px flex container, so the actually used width for the right item is 400px *(400/550).
(Of course this is in the absense of any distorting factors such as flex-grow, which would make the whole calculation a lot more complex!)
.container {
display: flex;
width: 400px;
height: 2000px;
background-color: #aaa;
}
.left {
width: 150px;
background-color: lightgreen;
}
.right {
width: 100%;
background-color: lightcoral;
position:relative;
}
.fixed {
position: fixed;
height: 100px;
background-color: skyblue;
width:calc(400px * (400 / (400 + 150)));
}
<div class="container">
<div class="left">
My width can change anytime.
</div>
<div class="right">
<div class="fixed">
I'm fixed. Scroll the page to verify.<br > I want to be the same width as my red parent.<br > Any tips?
</div>
</div>
</div>
Related
I have two div elements, which adjust their sizes dependent on the content in those elements. The problem is that if they both filled with content and I set even more content in the left element, it grows and makes the right element smaller, even though the right one already full with a content:
.container {
border: 2px solid black;
width: 400px;
height: 50px;
display: flex;
flex-flow: row;
}
.side {
height: 100%;
flex-grow: 1;
background-color: grey;
}
.left {
max-width: 60%;
min-width: 45%;
padding-right: 5%;
}
.right {
max-width: 45%;
min-width: 30%;
padding-left: 5%;
}
.content {
width: 100%;
height: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.one {
background-color: yellow;
}
.two {
background-color: blue;
}
<div class="container">
<div class="left side">
<div class="content one">
Very long content that right now pushing div on the right side even though the right side already full!
</div>
</div>
<div class="right side">
<div class="content two">
Barely overfill the right side.
</div>
</div>
</div>
So how can I let my right element take all necessary space when it's needed and prevent left element pushing just because it has more content?
Hope that I can get some help with my problem!
Remove min-width: 30% from from the right side element
That would make flex items to contain the width as you wanted
I'm trying to use CSS calc() to build an App Style layout with a footer at the bottom.
The main CSS players:
.content-container {
height: calc(100% - 110px);
background-color: red;
overflow: hidden;
}
.left, .right {
float: left;
height: 100%;
}
.left {
width: 70%;
background-color: blue;
}
.right {
width: 30%;
background-color: yellow;
}
.right-content {
overflow: auto;
height: 100%;
margin-bottom: 30px;
}
Here's a quick overview of the HTML:
<div class="content-container">
<div class="left">
<h1>left</h1>
</div>
<div class="right">
<div class="right-title">
TITLE OF THE SECTION
</div>
<div class="right-content">
<div class="group">
</div>
</div>
</div>
</div>
<div class="footer"></div>
Please view the full example here:
http://codepen.io/woocas/pen/MwyBGd?editors=110
I'm trying to make the overflow in the .right div (the yellow one) take the height of the .content-container.
But as you can see in the example, the scrollbar goes beyond the space allocated to it by content-container. It's behind the footer.
Any help would be greatly appreciated.
Have you tried setting the CSS heights in your right column to percentage values since they're embedded in a container they'll always present in a fit manner?
.right-title {
background-color: gray;
height: 65%;
}
.right-content {
overflow: auto;
height: 35%;
}
You could do another calc on the .right height and add a margin-bottom, so that .right will not go beyond the footer, but the whole thing seems to be a bit over-complicated.
.right {
width: 30%;
background-color: yellow;
height: calc(100% - 90px);
padding-bottom: 90px;
}
I've searched and tried a bunch of different things. I have a variable-height tophalf, and the bottom half should fill up the remaining space. A JSfiddle:
http://jsfiddle.net/UCJmQ/
CSS:
.top {
background-color: lightblue;
height: 300px;
}
.bottom {
background-color: green;
min-height: 100px;
overflow: hidden;
height: 100%;
}
html, body {
height: 100%;
}
HTML:
<div class="top"></div>
<div class="bottom">
</div>
What I'm seeing now is the green page taking up the entire window's height, not the remaining height. How can I make it take the remaining height instead?
http://jsfiddle.net/ph35V/
<div class="wrapper">
<div class="top">
300px
</div>
<div class="bottom">
Remaining height
</div>
</div>
html, body {
height: 100%;
width: 100%;
margin: 0;
}
.wrapper {
display: table;
height: 100%;
width: 100%;
}
.top {
display: table-row;
background: lightblue;
height: 300px;
}
.bottom {
display: table-row;
height: 100%;
background: green;
}
Could also use box-sizing: border-box or conflicting absolute positions
Is that variable-height specified in CSS or not?
From the fiddle I assume it is. If that's the case, try position: absolute with left, bottom, right set to 0 and top to upper div height:
DEMO
I have 2 block-inline divs.
I don't wan't to specify the width of the first one but, I would like the second takes 100% of the remaining space. The container of the two divs take 100% of my screen.
It seems to be possible using jQuery to determine the width of the first div and to set the second value, but I would like to do it in pure css.
How can I do that ?
div.box {
background: #EEE;
height: 100px;
width: 600px;
}
div.div1 {
background: #999;
float: left;
height: 100%;
width: auto;
}
div.div2 {
background: #666;
height: 100%;
}
div.clear {
clear: both;
height: 1px;
overflow: hidden;
font-size: 0pt;
margin-top: -1px;
}
<div class="box">
<div class="div1">1st</div>
<div class="div2">2nd</div>
<div class="clear">
</div>
Hope it helped.
If you don't want to use jquery then this might worth doing
<div style="width:100%;">
<div style="float:left; display:inline-block;" class="div1">left div</div>
<div style="float:right; display:inline-block;" class="div2">right div</div>
</div>
I'm trying to put two blocks into one fixed-height block to create the following layout:
------------------------
UL (initial height=0),
grows on element add until maximum height reached
scroll should be added after max height is reached
------------------------
DIV (initial height=100% of parent)
decreases until min height is reached
------------------------
HTML part of the layout:
<div style="height:100px">
<ul style="max-height:70px;height:auto;overflow:auto"></ul>
<div style="min-height:30px;height:auto">
<span>TEST CONTENT</span>
</div>
</div>
You really can't do this cleanly with just CSS. I'd suggest using a bit of jQuery for this where you just query the height of both at any given time, figure out which is taller, and then set the other element to match
I'm not sure that the DIV's properties are entirely clear. Note, this is not an answer (yet), just too long to put into a comment.
<div id="container">
<div id="list">
<ul></ul>
</div>
<div id="content">
<span>TEST CONTENT</span>
</div>
</div>
#container {
height: 100px;
background: grey;
}
#list {
max-height: 70px;
overflow: auto;
background: #ddf;
}
#content {
min-height: 30px;
height: auto;
background: #fdf;
}
// For testing
setInterval(function(){
$('ul').append('<li>Test</li>');
},3000);
http://jsfiddle.net/V8yuN/
Now, if you want the DIV#content to at first take up the entire height, but then shrink as the DIV#list UL grows, what is it you're trying to accomplish with DIV#content? Note, I put the UL within a DIV.
Now, the above fiddle demonstrates in a way what you're describing (the DIV#content gets pushed to the bottom). The question I have is, what does the height of the DIV#content matter in your design?
EDIT
Note, if you make the #container overflow: hidden and make the #content's height: 100%, it would appear as if the #container is shrinking.
#container {
height: 100px;
background: grey;
overflow: hidden;
}
#list {
max-height: 70px;
overflow: auto;
background: #ddf;
}
#content {
height: 100%;
background: #fdf;
}
http://jsfiddle.net/V8yuN/2
I have no idea, though, if that would cause your design to break, if the #content's actual content needs to display (for instance, if it is changed dynamically).
EDIT 2
The following accomplishes everything but the vertical-align of the #content text:
HTML
<div id="container">
<div id="push">
<div id="list">
<ul></ul>
</div>
<div id="content">
<div class="border-top"></div>
<div id="content-inner">
<span>TEST CONTENT</span>
</div>
</div>
</div>
<div class="border-bottom"></div>
</div>
CSS
#container {
height: 100px;
background: grey;
}
#push {
height: 95px;
overflow: hidden;
}
#list {
max-height: 70px;
overflow: auto;
background: #ddf;
}
#content-inner {
min-height: 100px;
background: #dfd;
margin: 0;
border-left: 5px solid #fdf;
border-right: 5px solid #fdf;
}
.border-top {
background: #fdf;
border-radius: 5px 5px 0 0;
height: 5px;
}
.border-bottom {
background: #fdf;
border-radius: 0 0 5px 5px;
height: 5px;
}
http://jsfiddle.net/V8yuN/6/
Let's say your html looks like this:
<div id="wrap">
<div id="top">
</div>
<div id="bottom">
</div>
</div>
then your CSS could look like this, with #wrap height set, and a min-height for the bottom.
Mind the height 100% !important.
#wrap{
height: 400px;
background: #ccc;
}
#top{
//height: 200px; for testing
background: #f0f;
}
#bottom{
height: 100% !important;
min-height: 200px;
overflow: scroll;
background: #000;
}
is that kind of what you're searching for?
Would help though if you could post the stuff you've already done.