I don't know how to limit the height from scroll div without fixing the max-height.
Here is the situation:
<div>
<div class="img-item"><img></div>
<div class="scroll-item"></div>
</div>
I want to limit my scroll-item div to the height of my img-item.
display: flex doesn't work because it gives the height of the heighest div (which is the scroll item)
height:100% and auto don't work neither.
So i have no idea how to do that without fixing the height (ex: 200px).
See example fiddle.
Do you have an idea?
Well I guess this is what you are looking for- wrap the contents of the scroll item into an absolutely positioned box so that the scroll item does not get to determine the height.
Example:
*{
box-sizing: border-box;
}
.wrapper {
display: flex;
width: 250px;
}
.wrapper > * {
border: 1px solid red;
}
.scroll-item{
position: relative;
overflow-y: auto;
flex: 1;
}
img{
max-width: 100%;
vertical-align: top;
}
.inner{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="wrapper">
<div class="img-item">
<img src="http://placehold.it/100x100">
</div>
<div class="scroll-item">
<div class="inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae molestiae, libero inventore nobis et veritatis, laborum vitae, vel eaque omnis ad adipisci quia velit blanditiis qui. Cum voluptas quisquam itaque possimus accusamus repellendus quia iure
asperiores. Unde, rerum nihil maiores nisi, iusto voluptate id cumque incidunt, perspiciatis facilis perferendis explicabo.
</div>
</div>
</div>
Check this out and let me know your feedback on this. Thanks!
Related
https://jsfiddle.net/d3yns9b6/ shows how max-width doesn't work when I want to set it to something larger than the containing element.
Since it's absolutely positioned it should be able to extend outside the containing element. If I set an exact value using width it works but then both pieces of text in the example are exactly that width.
I want them both to take up as little width as they need, up to a maximum of the amount I set (even if it exceeds the parent container).
.out {
position: relative;
width: 200px;
height: 400px;
background-color: blue;
}
.in {
position: absolute;
max-width: 600px;
background-color: yellow;
}
<div class="out">
<div class="in">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam commodi saepe, magnam aliquid quisquam cum ex corrupti sequi aut eius harum animi vitae, exercitationem eaque tempore culpa at itaque explicabo.
</div>
<div class="in" style="margin-top:300px">
Lorem
</div>
</div>
Well, when no width is provided, it will fall back to auto, meaning it will use the width given by the parent element, regardless of absolute positioning or any max-width. So you need to specify any width, using percentage or relative units like vh or vw.
.out {
position: relative;
width: 200px;
height: 400px;
background-color: blue;
}
.in {
position: absolute;
width: 500%;
max-width: 600px;
}
.in > span {
background-color: yellow;
display: inline-block;
}
<div class="out">
<div class="in">
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam commodi saepe, magnam aliquid quisquam cum ex corrupti sequi aut eius harum animi vitae, exercitationem eaque tempore culpa at itaque explicabo.</span>
</div>
<div class="in" style="margin-top:300px">
<span>Lorem</span>
</div>
</div>
You need to set the width with width and constrain it with max-width.
Something like this:
.in {
position: absolute;
width: 100vw;
max-width: 600px;
background-color: yellow;
}
This is the logical behavior of absolute element where their width obey to the shrink-to-fit algorithm thus they cannot exceed the available width of their containing block.
the shrink-to-fit width is: min(max(preferred minimum width, available width), preferred width). ref
One idea is to increase the available width by increasing the padding since absolute element consider the padding-box then you can apply negative margin to compensate the padding added.
.out {
position: relative;
width: 200px;
padding-right:400px; /*width + padding = 600px (equal to max-width)*/
margin-right:-400px;
height: 400px;
background-color: blue;
background-clip:content-box; /* We don't show the background on the padding*/
}
.in {
position: absolute;
max-width: 600px;
background-color: yellow;
}
<div class="out">
<div class="in">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam commodi saepe, magnam aliquid quisquam cum ex corrupti sequi aut eius harum animi vitae, exercitationem eaque tempore culpa at itaque explicabo.
</div>
<div class="in" style="margin-top:300px">
Lorem
</div>
</div>
In this case the padding is not really needed since it's a block element but it can be useful when dealing with inline elements.
Example:
.out {
position: relative;
display:inline-block;
width: 200px;
padding-right:400px; /*width + padding = 600px (equal to max-width)*/
margin-right:-400px;
height: 300px;
background-color: blue;
background-clip:content-box; /* We don't show the background on the padding*/
}
.in {
position: absolute;
max-width: 600px;
background-color: yellow;
}
.extra {
display:inline-block;
background:red;
vertical-align:top;
margin-top:100px;
}
<div class="out">
<div class="in">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam commodi saepe, magnam aliquid quisquam cum ex corrupti sequi aut eius harum animi vitae, exercitationem eaque tempore culpa at itaque explicabo.
</div>
<div class="in" style="margin-top:200px">
Lorem
</div>
</div>
<div class="extra">
some content here
</div>
I've been trying different ways but couldn't achieve what I want.
<div id="parent">
<div id="child-1"></div>
<div id="child-2"></div>
<div id="child-3"></div>
</div>
So I have the #parent at height: 100vh.
#child-1 should have height: 100% of parent.
#child-2 and #child-3 should have width: 100% and height: auto and they should be stacked on top of each other at position bottom: 0.
I've been trying to set parent relative and two childs absolute but the first child's height gets ignored.. I tried with display flex but first child's height is not 100% of parent.. I'm very confused how to do this.
Can someone help?
Here is what I'm trying to achieve: jsfiddle.net
You have to first get the bottom value of #child-2 dynamically as you said it should be on the top of #child-3.
You need to apply jQuery to get the height of #child-3 dynamically and then applying the height value of #child-3 to the bottom value of child-2, just like
#child-2 {
bottom: height-of-child-3;
}
Look at this Codepen
Or look at the snippet below:
height_child_three = $('#child-3').height();
$('#child-2').css({
position: 'absolute',
bottom: height_child_three
});
#parent {
width: 100vw;
height: 100vh;
background: #000;
position: relative;
}
#child-1 {
width: 100%;
height: 100%;
background: #eee;
}
#child-2 {
width: 100%;
background: #a0ea0e;
}
#child-3 {
position: absolute;
bottom: 0;
width: 100%;
background: #30e30e;
}
body { margin: 0; } /* A small reset */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
<div id="child-1">
<strong>I'm child 1</strong>
</div>
<div id="child-2">
<strong>I'm child 2</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione deleniti voluptate commodi distinctio, repellendus qui, placeat laboriosam eligendi! Ducimus reiciendis officiis debitis placeat adipisci quae hic tempore vitae suscipit nemo.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sed aliquid, laborum nisi quos excepturi hic! Molestias hic consectetur dolor! Perferendis iste, quisquam quaerat ab, odio ducimus! Odio, minima error?</p>
</div>
<div id="child-3">
<strong>I'm child 3</strong>
</div>
</div>
Hope this helps!
Is this what you need?
HTML:
<div id="parent">
<div class="child-1"></div>
<div class="child-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error voluptatum necessitatibus dolorem soluta laudantium cupiditate maiores neque, aliquid accusamus autem saepe tempora, itaque possimus, eaque deleniti odio atque enim omnis.</div>
<div class="child-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, illo est dolor dolores placeat deleniti quae consequuntur eum ipsum blanditiis laboriosam quod repellendus fugit! Odio quis rem vel a dolores.</div>
</div>
CSS:
html,
body,
div {
margin: 0;
padding: 0;
}
*,
*:after,
*:before {
box-sizing: border-box;
}
#parent {
position: relative;
width: 100vw;
height: 100vh;
background: #ccc;
}
.child-1 {
width: 100%;
height: 100%;
background: red;
}
.child-2 {
width: 100%;
height: auto;
padding: 30px;
background: blue;
}
.child-3 {
width: 100%;
height: auto;
padding: 30px;
background: green;
}
Here you can see a solution just using plain CSS. CODEPEN
Maybe I'm overlooking something I don't know hehe.. But the point is this I have two columns beside each other. One, the left, should be the master of the height of the columns wrap, the right, which contains an img, should not be counted in height for the wrap's height... I can't use fixed heights, not even with Jquery or something cause the layout should change if the user drags his browser window smaller.. Thanks!
So my code is like
<div class="column_wrap">
<div class="column">
Some text
</div>
<div class="column">
IMG
</div>
</div>
Example of what I want to achieve
If the image is not to contribute to the height/width it would need to be either a background image or absolutely positioned.
I've assumed that the two columns will have equal width for this scenario and I have used flexbox to ensure that the columns are also equal height.
Absolute Position
The image need an additional wrapper which is the same size as the second column like so:
* {
box-sizing: border-box;
}
.column_wrap {
display: flex;
margin: 10px auto;
bordeR: 1px solid grey;
}
.column {
flex: 0 0 50%;
position: relative;
overflow: hidden;
}
.imgwrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.imgwrap img {
max-width: 100%;
}
<div class="column_wrap">
<div class="column">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis rem, repudiandae dolores ea, exercitationem quod quos distinctio voluptate. Ratione doloribus fugiat quis eaque quia modi numquam laudantium temporibus veritatis praesentium aliquid expedita dolores, voluptates sequi, natus eum dolorum maxime. Earum iure quasi odit excepturi rerum, debitis repellat enim veniam impedit.
</div>
<div class="column">
<div class="imgwrap">
<img src="http://lorempixel.com/output/fashion-q-c-640-480-8.jpg" alt="" />
</div>
</div>
</div>
Codepen Demo
Background Image
* {
box-sizing: border-box;
}
.column_wrap {
display: flex;
margin: 10px auto;
bordeR:1px solid grey;
}
.column {
flex:0 0 50%;
position: relative;
overflow: hidden;
}
.column:nth-child(2) {
background-image: url(http://lorempixel.com/output/fashion-q-c-640-480-8.jpg);
background-size: cover;
}
<div class="column_wrap">
<div class="column">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis rem, repudiandae dolores ea, exercitationem quod quos distinctio voluptate. Ratione doloribus fugiat quis eaque quia modi numquam laudantium temporibus veritatis praesentium aliquid expedita
dolores, voluptates sequi, natus eum dolorum maxime. Earum iure quasi odit excepturi rerum, debitis repellat enim veniam impedit.
</div>
<div class="column">
</div>
</div>
Codepen Demo
I need to position several div rows to the bottom of a container, similar to the image here:
My problem lies in that almost every solution on SO requires either absolute positioning or some method which requires modification every time a new element is added. I tried using a display:table-cell and vertical-align:middle, but this broke my row layout (all rows had display:block;). Is there a way to get this done in a way I can keep adding html rows to the layout and it will grow from the bottom to the top without modifying the CSS?
Edit: The answer NEEDS to still work after adding a new row without modifying any CSS. IE9+ support is highly preferable. CSS ONLY solution is also highly preferred. If no answers with such criteria appear by tomorrow I'll tag the next most useful one as right.
(I'm using foundation in case that helps)
JSFiddle to play with:
https://jsfiddle.net/o47xeze7/
<div class="parent">
<div class="child">abcdfg</div>
<div class="child">abcdfg</div>
</div>
.parent {
width: 100%;
height: 20rem;
border: 1px solid black;
display: table;
}
.child {
border: 1px solid red;
display: block;
vertical-align: bottom;
}
UPDATE: I'm an idiot... All I had to do was create a container with absolute bottom positioning and let it grow updwards. When I said no absolute positioned elements I said it because I don't want anything with the likes margin-top: x-pixels, because it requires updating that value every time I add a new row, but doing an absolute bottom placed container doesn't. Sorry guys. Here is the working solution in case anyone wants it.
https://jsfiddle.net/b6akcdso/
<div class="parent">
<div class="bottom-aligned-contanier">
<div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus expedita praesentium aperiam, eveniet in, dolore iusto excepturi quibusdam accusantium delectus aut atque assumenda quaerat recusandae perferendis repellat labore, explicabo maiores.</div>
<div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis deleniti minima nostrum, tenetur autem, debitis magni vel facere laudantium incidunt asperiores aliquam cupiditate cum perferendis cumque inventore, dignissimos ad in.</div>
<div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum impedit deleniti, id voluptatum est! Quibusdam ea fugit obcaecati minima soluta, quis voluptate aspernatur corrupti, minus tempore ipsa adipisci porro. Ab.</div>
</div>
</div>
.parent {
width: 100%;
height: 20rem;
background-color: lightgray;
position: relative;
}
.bottom-aligned-contanier {
position: absolute;
bottom: 0;
}
.child {
display: block;
width: 100%;
background-color: darkgray;
color: white;
}
.child:nth-child(2n) {
background-color: gray;
}
Awarding right answer to the guy that gave me the idea to do this.
If you can use jQuery, then this solution works. Here is a fiddle: https://jsfiddle.net/o47xeze7/3/
HTML
<div class="parent">
<div class="bottom">
<div class="child">abcdfg</div>
<div class="child">abcdfg</div>
</div>
</div>
CSS
.parent {
width: 100%;
height: 20rem;
border: 1px solid black;
display: block;
}
.child {
border: 1px solid red;
display: block;
}
.bottom {
display: block;
position: relative;
}
jQuery
$(function() {
var parentHeight = $(".parent").height();
var bottomHeight = $(".bottom").height();
var difference = parentHeight - bottomHeight;
$(".bottom").css("margin-top", difference);
});
flexbox can do that.
.parent {
width: 100%;
height: 10rem;
border: 1px solid black;
display: flex;
flex-direction: column;
justify-content: flex-end;
margin-bottom: 1em;
}
.content {
align-self: flex-start;
margin-bottom: auto;
}
.child {
width: 100%;
border: 1px solid red;
margin: 0;
}
<div class="parent">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt ipsam nihil vel doloribus maxime sed animi repellat consequatur, earum, eum sit. Repellendus fugit dolorem dolorum facere quo odit numquam autem, qui commodi accusantium hic. Omnis.</p>
</div>
<div class="child">top</div>
<div class="child">bottom</div>
</div>
<div class="parent">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt ipsam nihil vel doloribus maxime sed animi repellat consequatur, earum, eum sit. Repellendus fugit dolorem dolorum facere quo odit numquam autem, qui commodi accusantium hic. Omnis.</p>
</div>
<div class="child">top</div>
<div class="middle">middle</div>
<div class="child">bottom</div>
</div>
JSfiddle Demo
If you're ready to ditch support for IE8 and IE9 then this might be the best solution for you since you don't want to use absolute/table-cell positioning.
You can achieve what you're trying to do using flexbox. Here's how it's done in your case:
.parent {
width: 100%;
height: 20rem;
border: 1px solid black;
display: flex;
flex-direction: column-reverse;
}
.child {
border: 1px solid red;
}
<div class="parent">
<div class="child">abcdfg</div>
<div class="child">abcdfg</div>
</div>
I try to achieve a Layout with nested min-height divs and a sliding footer.
The problem of course is that die inner min-height div is not expanding to the full heights of the outer div because the outer divs height is set with min-height.
here is the html:
<div class="container">
<section class="pos-container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, voluptates, qui eos dignissimos quae nobis at provident voluptatum dicta nesciunt possimus iusto vitae nihil hic assumenda aspernatur quos vel necessitatibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, voluptates, qui eos dignissimos quae nobis at provident voluptatum dicta nesciunt possimus iusto vitae nihil hic assumenda aspernatur quos vel necessitatibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, voluptates, qui eos dignissimos quae nobis at provident voluptatum dicta nesciunt possimus iusto vitae nihil hic assumenda aspernatur quos vel necessitatibus.</p>
</section>
</div>
<footer>
i'm footer
</footer>
and the css:
body {
background-color: grey;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow-y: scroll;
}
.container {
z-index: 1;
position: relative;
width: 100%;
min-height: 100%;
background-color: pink;
margin-bottom: 6em;
}
.pos-container {
position: relative;
width: 50em;
min-height: 100%;
margin: auto;
background-color: green;
}
footer {
z-index: 0;
position: fixed;
bottom: 0;
width: 100%;
height: 6em;
}
FIDDLE #1
In this Fiddle the height of the inner div (green) is not expanding to the height of the outer div(pink).
FIDDLE #2
Seems fixed if i set the height of the outer div from min-height to height but there is another problem if the height of the inner div is more than 100% as you can see in FIDDLE #3
Is there any pure css solution for this problem?
Thanks in advance!
Remove the height for body or make it height:auto;
Check this FIDDLE
CSS change
body{
height:100%; // remove this and add below line
height:auto;
}