Is there a way, without using JavaScript, to cause child divs to extend to the borders of their parent, without exceeding those borders, when you cannot know beforehand the size of the parent div?
Below is a sample markup/style demonstrating my issue. If you load it into a browser, you will see that #two and #three extend outside their parent, #one, and cause scrollbars to appear.
My issue is not so much the scrollbars but that I need to learn how to tell the child divs to occupy the width or height remaining to them rather than the full height or width of the parent.
<html>
<head>
<style>
html, body {width:100%;height:100%;margin:0;padding:0;}
.border {border:1px solid black;}
.margin { margin:5px;}
#one {width:100%;height:100%;}
#two {width:100%;height:50px;}
#three {width:100px;height:100%;}
</style>
</head>
<body>
<div id="one" class="border">
<div id="two" class="border margin"></div>
<div id="three" class="border margin"></div>
</div>
</body>
</html>
I had a similar problem, but in my case, I have content in my div that height-wise will exceed the boundaries of the parent div. When it does, I want it to auto-scroll. I was able to accomplish this by using
.vscrolling_container { height: 100%; overflow: auto; }
you could use display: inline-block;
hope it is useful.
In your example, you can't: the 5px margin is added to the bounding box of div#two and div#three effectively making their width and height 100% of parent + 5px, which will overflow.
You can use padding on the parent Element to ensure there's 5px of space inside its border:
<style>
html, body {width:100%;height:100%;margin:0;padding:0;}
.border {border:1px solid black;}
#one {padding:5px;width:500px;height:300px;}
#two {width:100%;height:50px;}
#three {width:100px;height:100%;}
</style>
EDIT: In testing, removing the width:100% from div#two will actually let it work properly as divs are block-level and will always fill their parents' widths by default. That should clear your first case if you'd like to use margin.
There are two techniques commonly used for this:
Absolute Positioning
Table Styles
Given the HTML you provided here is the solution using Absolute positioning:
body #one {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: auto;
height: auto;
}
body #two {
width: auto;
}
body #three {
position: absolute;
top: 60px;
bottom: 0;
height: auto;
}
<html>
<head>
<style>
html, body {width:100%;height:100%;margin:0;padding:0;}
.border {border:1px solid black;}
.margin { margin:5px;}
#one {width:100%;height:100%;}
#two {width:100%;height:50px;}
#three {width:100px;height:100%;}
</style>
</head>
<body>
<div id="one" class="border">
<div id="two" class="border margin"></div>
<div id="three" class="border margin"></div>
</div>
</body
You can always just use the table, tr, and td elements directly despite common criticisms as it will get the job done. If you prefer to use CSS there is no equivalent for colspan so you will likely end up with nested tables. Here is an example:
html, body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
#one {
box-sizing: border-box;
display: table;
height: 100%;
overflow: hidden;
width: 100%;
border: 1px solid black;
}
#two {
box-sizing: border-box;
display: table;
height: 50px;
padding: 5px;
width: 100%;
}
#three {
box-sizing: border-box;
display: table;
height: 100%;
padding-bottom: 60px;
padding-left: 5px;
}
#four {
display: table-cell;
border: 1px solid black;
}
#five {
display: table-cell;
width: 100px;
border: 1px solid black;
}
#six {
display: table-cell;
}
<html>
<div id="one">
<div id="two">
<div id="four"></div>
</div>
<div id="three">
<div id="five"></div>
<div id="six"></div>
</div>
</div>
</html>
For width it's easy, simply remove the width: 100% rule. By default, the div will stretch to fit the parent container.
Height is not quite so simple. You could do something like the equal height column trick.
html, body {width:100%;height:100%;margin:0;padding:0;}
.border {border:1px solid black;}
.margin { margin:5px;}
#one {width:500px;height:300px; overflow: hidden;}
#two {height:50px;}
#three {width:100px; padding-bottom: 30000px; margin-bottom: -30000px;}
you could use inherit
#one {width:500px;height:300px;}
#two {width:inherit;height:inherit;}
#three {width:inherit;height:inherit;}
Make sure the outermost div has the following CSS properties:
.outer {
/* ... */
height: auto;
overflow: hidden;
/* ... */
}
I think I have the solution to your question, assuming you can use flexbox in your project. What you want to do is make #one a flexbox using display: flex and use flex-direction: column to make it a column alignment.
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.border {
border: 1px solid black;
}
.margin {
margin: 5px;
}
#one {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
#two {
height: 50px;
}
#three {
width: 100px;
height: 100%;
}
<html>
<head>
</head>
<body>
<div id="one" class="border">
<div id="two" class="border margin"></div>
<div id="three" class="border margin"></div>
</div>
</body>
</html>
If I've understood you correctly, the easiest method is to float the children. For example:
#one { width: 500px; height: 1%; overflow: hidden; background: red; }
#two { float: left; width: 250px; height: 400px; background: aqua; }
#two { float: left; width: 250px; height: 200px; background: lime; }
Setting a dimension (height/width) and overflow to auto or hidden on the parent element causes it to contain any floated child elements.
Note that overflow:hidden; can occasionally cause problems with content getting cut off, in which case you might want to try this alternative method:
http://www.positioniseverything.net/easyclearing.html
For closure, I think the answer to this question is that there is no solution. The only way to get the behavior I want is with javascript.
If you want the child divs to fit the parent size, you should put a margin at least of the size of the child borders on the child divs (child.margin >= child.bordersize).
For this example, just remove the width:100%; and the height:100% in #one and remove the width:100% in #two. It should be something like this:
html, body {width:100%; height:100%; margin:0; padding:0;}
.border {border:1px solid black;}
.margin {margin:5px;}
\#one {}
\#two {height:50px;}
\#three {width:100px; height:100%;}
Related
I have two divs. outer div taking 25%. And the inner div is placed at the bottom (position: fixed; bottom: 0; width: 25%; border-top: 1px solid red) But this is not taking 25%.
I am adding border for this div. So there is an white space is showing because of the width.
HTML:
<div id="main-div">
<div id="outer-div">
<div id="div-1"></div>
<div id="div-2">
<div id="inner-div"></div>
</div>
</div>
</div>
CSS:
#main-div{
height: 100%;
width: 100%;
display: table;
}
#outer-div {
width: 100%;
}
#div-1, #div-2 {
width: 100%;
}
#inner-div {
position: fixed;
bottom: 0; width: 25%;
border-top: 1px solid red;
}
How to apply exactly apply 25% width to inner-div which has position fixed ?
UPDATE Added js fiddle in comment
Remove your body margin . This issue because of you don't remove your body margin you can simply fix this
body {
margin:0;
}
body {
margin:0;
}
#main-div{
height: 100%;
width: 100%;
display: table;
}
#outer-div {
width: 100%;
}
#div-1, #div-2 {
width: 100%;
}
#inner-div {
position: fixed;
bottom: 0; width: 25%;
border-top: 1px solid red;
}
<body>
<div id="main-div">
<div id="outer-div">
<div id="div-1"></div>
<div id="div-2">
<div id="inner-div"></div>
</div>
</div>
</div>
</body>
The real reason why inner-div has more width than outer-div is because inner-div has position: fixed applied to it.
Now when you apply position: fixed, it makes the element position relative to the viewport.
So, in this case inner-div is relative to the body which has some user-agent margin styles applied. To make them have same width apply margin: 0 to the body.
Also, apply box-sizing: border-box to outer-div to exclude the border in the width.
I have updated the fiddle for you. So both divs have the same width.
https://jsfiddle.net/nashcheez/uur2h5w3/4/
Fixed position is relative to the browser window hence percentage values will be relative to the <html> element (http://www.w3schools.com/cssref/pr_class_position.asp). Although experimental position:sticky might accomplish what you need since it is relative to the viewport (parent relative element).
You can use below css for this
#inner-div {
box-sizing: border-box;
}
You can check updated fiddle
You need to reset body for browser. For this reason "inner-div" is taking space.
body{margin:0;padding:0;}
body{margin:0;padding:0;}
#main-div{
height: 100%;
width: 100%;
display: table;
background: blue none repeat scroll 0 0;
border: 1px solid blue;
}
#outer-div {
width: 25%;
border: 1px solid green;
}
#div-1 {
width: 100%;
}
#div-2 {
display: table;
height: 0;
padding-right: 2px;
width: 100%;
}
#inner-div {
text-align: center;
position: fixed;
bottom: 0;
width: 25%;
border-top: 1px solid red;
padding-bottom: 27px;
padding-top: 10px;
}
<div id="main-div">
<div id="outer-div"> //list
<div id="div-1"> //parent-scrol
<div id="div-2"> //scroll
<div id="div-3"> //inner-list
<div id="inner-div">wefffef</div> //create-new
</div>
</div>
</div>
</div>
</div>
I have a square block of 100*100px, there is a container block that may be resized. I want to resize the inner block so it always be inside the parent without overflow and always square (to be resized dynamically)
Note: I want to maintain the square shape of the inner div
#child {
height: 100px;
width: 100px;
background-color: red;
}
#par {
height: 200px;
width: 200px;
border: 2px solid black;
}
<div id="par">
<div id="child">
</div>
</div>
If you want an element to be a square (ratio of 1:1) then just add padding-bottom: 100% to it. If you want that square to have content then the inner content of that square must be absolutely positioned.
body { width: 200px; }
.square {
padding-bottom: 100%; /* 1:1 aspect ratio (square) */
border:1px solid red;
position: relative;
}
<div class="square"></div>
You can place the square in a container/parent but you did not say how overflowing should behave?
.parent {
height: 200px;
width: 80%;
border: 1px dashed black;
}
.square {
padding-bottom: 100%; /* 1:1 aspect ratio (square) */
border:1px solid red;
position: relative;
}
.square .inner {
position: absolute;
top: 0; left: 0;
width: 100%;
overflow: auto;
}
<div class="parent">
<div class="child square">
<div class="inner">responsive square 1:1</div>
</div>
</div>
jsFiddle: https://jsfiddle.net/azizn/mheoqbnw/
what you want is this:
http://marcj.github.io/css-element-queries/
element-queries, the future
Just give the #child element a max-height and max-width of 100%:
#child{
height:100px;
max-height:100%;
width:100px;
max-width:100%;
}
Try this
#par{
width: 200px;
height: 200px;
border:2px solid black;
overflow: hidden;
}
#par #child{
position: relative;
width: 50%;
height: 50%;
margin: auto;
margin-top: 25%;
background-color:red;
}
http://jsfiddle.net/voj2wsyb/
Give the child min, max and height 100% it's going to look to it's parent and with 100 % it's taking the same height
Here you are :-
.child
{
height:100px;
width:100px;
background-color:red;}
.par
{
position: relative;
height:200px;
width:200px;
border:2px solid black;
}
.par:before{
content: "";
display: block;
padding-top: 100%; /* initial ratio of 1:1*/
}
.par > .child{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
<html>
<body>
<div class="par">
<div class="child">
</div>
</div>
</body>
</html>
If it helps, mark the problem solved.
I use EQCSS, an element queries plugin that lets me grab values from JavaScript to use in my CSS. Here's a demo with a column 33% wide that has a square that will resize responsively inside it:
<section>
<div></div>
</section>
<style>
section {width: 33%;}
#element 'div' {
$this {
width: auto;
height: eval("clientWidth")px;
background: red;
}
}
</style>
<script src=http://elementqueries.com/EQCSS.js></script>
In this snippet, the width: auto means it expands to fill its container. The eval('clientWidth') is inside of the element query, so it refers to this.clientWidth where the this is the element that matches the query. This means the height of our square will always be equal to its width! (a square).
Check it out: http://elementqueries.com
I also use this same technique to allow me to resize Youtube and Vimeo iframes according to their aspect ratio without needing a wrapper:
#element 'iframe' {
$this {
margin: 0 auto;
width: 100%;
height: eval("scrollWidth/(width/height)")px;
}
}
Responsive video scaling demo: http://elementqueries.com/demos/video-scaling.html
Hope this helps!
There is now the CSS attribute aspect-ratio:
body { width: 200px; }
.square {
border: 1px solid red;
aspect-ratio: 1 / 1;
width: 100px; /* <-- optional, this is only for the demo */
}
.not-a-square {
border: 1px solid green;
aspect-ratio: 2 / 1;
width: 100px; /* <-- optional, this is only for the demo */
}
<div class="square"></div>
<div class="not-a-square"></div>
Support: https://caniuse.com/mdn-html_elements_img_aspect_ratio_computed_from_attributes
I have been looking for an answer to this question but have not found anything. I have searched stack overflow and other resources. The question has been asked before and I have tried each of them the answers.
How can I get the div's to take up 100% of the vertical distance between the header and footer?
Here's my code:
HTML
<div class="page-wrap">
<header>This is the header</header>
<div id="container">
<div id="left">Left</div>
<div id="right">Right</div>
<div id="main">Main</div>
</div>
</div>
<footer class="site-footer">
I'm the Sticky Footer.
</footer>
CSS
/* * {
margin: 0;
} */
html, body {
width: 100%;
height: 100%;
margin:0;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -80px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
height: 80px;
}
.site-footer {
background: #265a88;
}
#left{
text-align:center;
color:white;
background-color: black;
height: auto !important;
height: 100%;
border: black dash;
float: left;
width: 20%;
min-height:100%;
overflow: scroll;
}
#right{
min-height:100%;
text-align:center;
color:white;
background-color: black;
height: 100%;
float: right;
width: 20%;
}
#main{
text-align:center;
color:white;
background-color: blue;
height: 100%;
border: black dash;
float: right;
width: 60%;
max-height:100%;
overflow: scroll;
}
header{
background-color: #265a88;
color:white;
text-align:center;
padding:5px;
}
You need to set the dimensions of container as such:
#container{
height: 100%
width: 100%
position: absolute;
}
However, in your case, you will have to set the height of the container so that it does not overflow and go over the footer.
In order for a child element to take 100% of the parent's height, the parent must have a set height (ie can't be a percent). This applies to all child elements besides the body tag, who's parent is html, and html set to 100% does provide a set pixel height for child elements. The easiest workaround for this is to use some javascript to calculate the height of a given parent element, and then set the child element accordingly. I am not aware of any pure css solution, that doesn't require some fiddling with properties such as line-height. As far as I know, this is a very common issue for web developers, and one which really depends on your flexibility of technology used and how hacked you want your css to look.
I have a 1100px-width div general container which I'd call (A) that resizes to 925px in my aplication. In addition, I have a div which has to more divs inside: one has a static width (200px) which I'd call (B) and the other doesn't but has an horizontal scrollbar which I'd call (C).
I want when general container resizes (A) , the div (C) resizes,too and keep its scroll bar.
I have came up with this jsfiddle so far but I can't figure it out what I am doing wrong.
Pd: I have used different metrics for simulation.
¿How can I make the div child(C) resizes with general container(A) width?
.
Its latest update
fiddle
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
.container{
height:100px;
}
.left{
width:100px;
height:100px;
background-color:green;
float: left;
}
.right{
overflow-x:auto;
background-color:red;
width: 100%;
min-height: 100px;
}
.content{
width:600px;
position :relative;
}
.wrap{
overflow: hidden;
padding-left: 10px;
}
<div class="container">
<div class="left">
</div>
<div class="wrap">
<div class="right">
<div class="content">
CONTENT
</div>
</div>
</div>
</div>
(C) should not resize, but have a certain width (more than 900px, to get the scrollbar.). The container (A) does the resizing and should have min-width:925px
update:
it turned out to be a bit more complex:
http://jsfiddle.net/p7perzc6/
.a {
border: 1px solid #aaa;
width : 800px;
height: 200px;
}
.b {
width: 100px;
background-color: green;
height: 200px;
float: left;
}
.c {
background-color: orange;
height: 200px;
margin-left: 101px;
float: left;
overflow-x: scroll;
width: 900px;
position: fixed;
}
I'm trying to set these divs to align like this:
but they end up either overlapping eachother (.title takes full width of container) or underneath eachother. Ideas?
.wrapper{
display: table;
float: left;
width: 1000px;
height: 200px;
}
.pic{
float: left;
width: 100%;
height: 20%;
}
.title{
width: 100%;
height: 20%;
}
.content{
width: 100%;
height: 20%;
}
.footer{
width: 100%;
height: 20%;
}
HTML:
<div class="wrapper">
<div class="pic"><img src="..."></div>
<div class="title"><p>title</p></div>
<div class="content"><p>lorem ipsum</p></div>
<div class="footer"></div>
</div>
JS FIDDLE: http://jsfiddle.net/mmb84836/
As per the Best Practice:
Put Pic in one Box and the other three Boxes on right in one Box and use "float:left or **display:inline-block**for those.
Here is the code for the same:
HTML
<div class="wrapper">
<div class="leftBox">
<div class="pic">pic</div>
</div>
<div class="rightBox">
<div class="title">title</div>
<div class="content">content</div>
<div class="footer">footer</div>
</div>
</div>
CSS
div {
border:1px solid #000;
}
.wrapper {
display: block; /*Default Property - You Can Remove Also*/
width: 1000px;
height: 200px;
}
.leftBox {
float:left;
width :20%;
height:100%
}
.rightBox {
width :79.5%;
float:left;
height:100%
}
.pic {
width: 100%;
height: 100%;
}
.title {
width: 100%;
height: 20%;
}
.content {
width: 100%;
height: 20%;
}
.footer {
width: 100%;
height: 20%;
}
Here is the Working Fiddle: http://jsfiddle.net/7xLyc3q1/
You've got a lot of answers here, but none of them explain what is actually happening here. When using float, there's something important you need to understand: floated elements are lifted out of the box model and have effectively zero width and height as far as other elements are concerned. There is a workaround for this: by specifying overflow:hidden in the parent element, floated elements will no longer "collapse".
Here's an example that demonstrates this. Notice that the title, content, and footer have a width:100%, and they're only filling the space that is remaining for them -- this is probably what you'd expect to happen. Notice also that there was no need to float them to the right... they take the space that's left.
Try adding float: right to .title, .content, and .footer.
Also it may be worth considering using Foundation or Twitter Bootstrap. Both have grid systems so this would guarantee the divs would resize to fit any size screen.
<div class="wrap">
<div class="pic">pic</div>
<div class="other">oth1</div>
<div class="other">oth2</div>
<div class="other">oth3</div>
</div>
.wrap { width:100; height:200px; }
.pic { float:left; width:29%; height:100%; margin-right:1%; background-color:red; }
.other { float:left; width:70%; height:32%; margin-bottom:0.5%; background-color:green; }
and jsfiddle http://jsfiddle.net/t85kz39a/
Here is one way of doing it if you can specify a width for the image. I assumed that the image would be 200px wide in this demo.
Try the following CSS:
.wrapper{
width: 600px;
height: 200px;
padding-left: 200px;
border: 1px dashed gray;
}
.pic{
float: left;
width: 190px;
margin-left: -200px;
border: 1px dashed blue;
}
.pic img {
display: block;
}
.title{
width: auto;
height: 20%;
border: 1px dotted blue;
}
.content{
width: auto;
height: 20%;
border: 1px dotted blue;
}
.footer{
width: auto;
height: 20%;
border: 1px dotted blue;
}
The trick is to open up a space to place the image. Add a 200px wide left padding to
the .wrapper.
The padding will force .title, .content and .footer to align 200px from the edge
of the wrapper.
For .pic, set the width to 200px (or smaller) and set the left margin to -200px to move
it into the padding area.
Finally, set the correct width for .wrapper, 600px. The overall width of .wrapper
will compute to 800px (600px width + 200px left padding - -200px left margin from the
float).
See demo: http://jsfiddle.net/audetwebdesign/mgg1stmc/
The main benefit of this approach is that you don't need to add any other wrapping
elements. (If you use floats, the extra wrappers are necessary.)
There's a much simpler css-only way without changing your HTML structure:
Demo http://jsfiddle.net/bfhng3a9/
All you need:
.wrapper {
overflow:auto;
text-align:center;
}
.pic {
float: left;
width:20%;
}
.title, .content, .footer {
width:80%;
float:right;
clear: right;
}
You can use this code and it is working according to your design.
Live Working Demo
HTML Code:
<div class="wrapper">
<div class="pic"><img src="..."/></div>
<div class="title"><p>Title</p></div>
<div class="content"><p>Content</p></div>
<div class="footer"><p>Footer</p></div>
</div>
CSS Code:
.wrapper{
position: relative;
float: left;
width: 1000px;
height: 200px;
border: 1px solid #000000;
}
.pic{
float: left;
width: 300px;
height: 200px;
background-color: red;
position: relative;
}
.title{
width: 650px;
height: 60px;
background-color: green;
position: relative;
left: 350px;
top:-16px;
}
.content{
width: 650px;
height: 60px;
background-color: blue;
position: relative;
left: 350px;
top: -22px;
}
.footer{
width: 650px;
height: 60px;
background-color: gold;
position: relative;
left: 350px;
top: -28px;
}
Result: