I want to make my inner div 100% width of the body, not 100% of the parent div. Is this possible?
The layout looks like this:
<body>
<div> /** Width:900px; **/
<div> /** This I want 100% of BODY, not of parent div **/
</div>
</div>
</body>
i hope you are looking like this........... see the DEMO
UPDATED DEMO 2 AS PER YOUR CURRENT REQUIREMENTS
CSS
.parent {
background:red;
width:900px;
margin:0 auto;
padding:10px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
.inner {
background:green;
height:100px;
position:absolute;
left:0;
right:0;
}
.child {
height:100px;
background:black;
margin:10px 0;
}
-------------**
Second Answer with without positioning but with a some trick what i used here so please check it the code & demo mentioned below :-
HTML
<body>
<div class="parent"> /** Width:900px; **/
<div class="child"></div>
</div>
<div class="inner"> /** This I want 100% of BODY, not of parent div **/</div>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
CSS
.parent {
background:red;
width:900px;
margin:0 auto;
padding:10px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
.inner {
background:green;
height:100px;
}
.child {
height:100px;
background:black;
margin:10px 0;
}
DEMO
you can use vh an vw units
.parent {
width: 900px;
height: 400px;
background-color: red;
}
.child {
width: 100vw;
height: 200px;
background-color: blue;
}
<html>
<body>
<div class="parent">
<div class="child">
</div>
</div>
</body>
</html>
try this:
.inner {
margin-left: -50vw;
left: 50%;
position: fixed;
height: 100vw;
width: 100vw;
top: 0;
}
.outer {
width: 900px;
/* your outer div style*/
}
<body>
<div class="outer"> /** Width:900px; **/
<div class="inner"> /** This 100% of BODY, not of parent div **/
</div>
</div>
</body>
Consider changing your layoiut to something like the following:
http://jsfiddle.net/KpTHz/
Then you can just apply ID tags to DIVs you want to apply specific rules to.
<div class="outer">
<div class="inner">HEADER</div>
</div>
<div class="outer">
<div class="inner">CONTENT</div>
</div>
<div class="outer">
<div class="inner">FOOTER</div>
</div>
.outer {
width:100%;
background:#ccc;
}
.inner {
width:920px;
background:#999;
margin:0 auto 20px;
padding:20px;
}
I think what you are asking for isn't possible. Instead you should consider rethinking your layout. I often find myself doing stuff like this:
html:
<div id="top">
<div class="wrapper"></div>
</div>
<div id="content">
<div class="wrapper"></div>
</div>
<div id="footer">
<div class="wrapper"></div>
</div>
css:
#top {
background: red;
}
#content {
background: orange;
}
#footer {
background: yellow;
}
.wrapper {
width: 860px;
margin: 0 auto;
padding: 20px;
background: rgba(255, 255, 255, 0.2);
}
demo - http://jsfiddle.net/bxGH2/
This made the trick. A jQuery script:
$(document).ready(function () {
var width = $(window).width();
$('.pane-block-8').attr('style', 'width:' + width + 'px; left:-26.5% !important;');
});
$(window).resize(function () {
var width = $(window).width();
$('.pane-block-8').attr('style', 'width:' + width + 'px; left:-26.5% !important;');
});
Overriding the min-width ( min-width:100% ) stopped the container from growing to the size of the contents.
Details:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset informs:
"Unlike almost any other element, the WHATWG HTML Rendering spec suggests
min-width: min-content
as part of the default style for , and many browsers implement such styling (or something that approximates it)."
Related
I want to make a webpage with <div> and 100% height. I keep having problems with the height. I now have a height of 100% + 100px;
I create a header div which is 100px height. That is the only static height I use. Below that div I made another div which should fill the page. But when I set this to 100% it will add 100% to the 100px. When I set this to auto it will be only +- 150px height. This is the HTML
<!-- header -->
<div id="header">
<div id="logo"></div>
<div id="menuTop">menutop</div>
</div>
<!-- center -->
<div id="linkerbalk">
<div id="login">login naam</div>
<div id="menuLinks">Menu<br />Menu<br />Menu<br />Menu<br />Menu<br /></div>
</div>
<!-- footer -->
and the CSS i use is this:
html,body {
height:100%
}
body {
position:relative;
margin:0;
}
#header {
width:auto;
height:100px;
background-color:#FC3;
overflow:hidden;
}
#logo {
background:url(../img/logo.png);
background-position:center;
background-repeat:no-repeat;
background-color:#27c9cb;
height:100px;
width:250px;
float:left;
overflow:hidden;
}
#menuTop {
overflow:scroll;
background-color:#2d2e33;
height:100px;
overflow:hidden;
width:auto;
}
#linkerbalk {
background-color:#2d2e33;
height:100%;
width:250px;
float:left;
overflow:auto;
}
#login {
background-color:#2faaaf;
height:35px;
width:auto;
overflow:hidden;
}
#menuLinks {
height:auto;
width:auto;
overflow: hidden;
}
Following is one of the ways to achieve this:
I have wrapped your HTML with a container div and given it 100% - height of header i.e. 100px.
.container{
height:calc(100% - 100px)
}
Working fiddle here.
You need a wrapper.
<body>
<div id="wrapper">
<div class='top'>
</div>
<div class='mid'>
</div>
<div class='bot'>
</div>
</div>
</body>
* {
margin: 0;
padding: 0;
}
body,
#wrapper {
height: 100%;
}
.top {
height: 20%;
}
.mid {
height: 70%;
}
.bot {
height: 10%;
}
I have this html:
<div id="wrapper">
<div id="left">left<br/>asdfa</div>
<div id="right">right</div>
<div style="clear:both"></div>
</div>
and the css:
#wrapper {
width: 400px;
background-color:green;
display:table;
}
#left {
display:table-cell;
float:left;
width:100px;
background: blue;
}
#right {
height:auto;
width:100px;
background: red;
float:right;
}
How to make the right div to fit the height of the wrapper div ??
there are 2 ways to do it:
1) set equal height for all 3 DIVs examle:
#wrapper {
width: 400px;
background-color:green;
display:table;
height:50px;
}
#left {
display:table-cell;
float:left;
width:100px;
background: blue;
height:50px;
}
#right {
width:100px;
background: red;
float:right;
height:50px;
}
Demo: fiddle
2)
add :
#right {
height:100%;
overflow:auto;
}
Demo: fiddle
Fiddle
#right {
text-align: right;
display:table-cell;
height:100%;
width:100px;
background: red;
position: relative;
}
you could try this out, tell me if it worked or not.
style.css
#right {
position: relative;
height: 100%;
width: 100px;
background: red;
float: right;
}
Using jQuery might be a bit overkill if the CSS fixes above work for you, but the guys at Zurb showcased a pretty neat way of equalling out the height of divs:
https://github.com/zurb/foundation/issues/1358
Here's some example HTML of a grid snippet and a block-grid snippet.
You'll notice a few data attributes, data-match-height and
data-height-watch. These are used to scope the parent of the elements
you want as the same height and to mark the children that will look to
match heights.
<div class="row" data-match-height>
<div data-height-watch class="small-3 columns" style="background: pink;">
<p>Some text...</p>
</div>
<div data-height-watch class="small-6 columns" style="background: orange;">
<p>Some text...</p>
<img src="http://placehold.it/300x300">
</div>
<div data-height-watch class="small-3 columns" style="background: lightblue;">
<p>Some text...</p>
</div>
</div>
From here, I created a some JS that will do the magic:
$("[data-match-height]").each(function() {
var parentRow = $(this),
childrenCols = $(this).find("[data-height-watch]"),
childHeights = childrenCols.map(function(){ return $(this).height(); }).get(),
tallestChild = Math.max.apply(Math, childHeights);
childrenCols.css('min-height', tallestChild);
});
You can include this JS in app.js under the JS links at the bottom of your pages.
HTML
<div id="left">left<br/>asdfa</div>
<div id="right">right</div>
<div style="clear:both"></div>
</div>
CSS
#wrapper {
width: 400px;
background-color: green;
display: table;
}
#left {
display: table-cell;
float: left;
width: 100px;
background: blue;
}
#right {
background-color: red;
display: table-cell;
padding-top: 5px;
width: 50%;
}
Fiddle
This many updates are not required.
Only put display:table-cell in #right css. that's it. It will solve your problem.
new answare using javascript
FIDDLE:http://jsfiddle.net/62DQ8/62/
ADD this in the <head>HERE</head>
<script language="JavaScript" type="text/javascript">
var h = document.getElementById("wrapper").offsetHeight;
document.getElementById("right").style.height = h + "px";
</script>
use this equal height jquery
setHeight($('.wrapper > div'));
function setHeight(col) {
var $col = $(col);
var $maxHeight = 0;
$col.each(function () {
var $thisHeight = $(this).outerHeight();
if ($thisHeight > $maxHeight) {
$maxHeight = $thisHeight;
}
});
$col.height($maxHeight);
}
I am trying to create a two div's side by side that fill my screen 100%. The left div contains some menu and the right the content. Here's the code I have at the moment: http://jsfiddle.net/HpWZW/ . The current problem is the height is only as large as my smallest div's content. So in this case my iframe in the right column is larger than my menu items in the left column; however, the height is limited to the left divs contents not the right. Any ideas? Thanks!
Code
<div>
<div class="table">
<div class="innerLeft">
<span>Left Column</Span>
</div>
<div class="innerRight">
<span>Content with Iframe</span>
</div>
</table>
</div>
...
html, body {height: 100%}
.table {
display: table;
height: 100%;
}
.innerLeft {
display: table-cell;
min-width: 160px;
background-color: lightblue;
color: black;
}
.innerRight {
display: table-cell;
width: 100%;
vertical-align: top;
background-color: red;
color: white;
}
I have ran in the same problem so many times, until I found this: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
It is a valid CSS solution for making your colums share the height. Then both will be the height of the largest column.
If you want to make your colums fill the whole screen you could use something like
.innerLeft {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 50%;
}
.innerRight {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
right: 0;
}
Note that this is css3 and wont work for old browsers.
css3
<style>
html, body{height:100%;padding:0;margin:0;}
div.table, div.table *{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
div.table{width:100%;height:100%;}
div.table div{border:1px solid black;width:50%;height:100%;float:left;}
</style>
html:
<div class="table">
<div class="innerLeft">
<span>Left Column</Span>
</div>
<div class="innerRight">
<span>Content with Iframe</span>
</div>
</table>
Page:
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
height:100%;
padding:0;
margin:0;
}
div.table, div.table * {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
div.table {
width:100%;
height:100%;
}
div.table div {
border:1px solid black;
width:50%;
height:100%;
float:left;
}
</style>
</head>
<body>
<div class="table">
<div class="innerLeft"> <span>Left Column</span>
</div>
<div class="innerRight"> <span>Content with Iframe</span>
</div>
</div>
</body>
</html>
The above code would create two columns whenever you would like to fill the whole screen or a section.
The following code could be used to only fill the whole screen (containers behaves odd when using position absolute, there is workarounds though):
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
height:100%;
padding:0;
margin:0;
}
#left {
width:50%;
height:100%;
position:absolute;
top:0;
left:0;
background:red;
}
#right {
width:50%;
height:100%;
position:absolute;
top:0;
right:0;
background:blue;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="right"></div>
</body>
</html>
Shortest answear is to use proper table, min-height can also help you, but not all browsers respect it.
Does this work for what your wanting?:
http://jsfiddle.net/Sgfnm/
<div>
<div class="table">
<div class="innerLeft">
<span>Left Column</Span>
</div>
<div class="innerRight">
<span>Content with Iframe</span>
</div>
</div>
</div>
.table {
display: block;
}
.innerLeft {
display: block;
width: 160px;
background-color: lightblue;
color: black;
float:left;
}
.innerRight {
display: block;
width: 100%;
vertical-align: top;
background-color: red;
color: white;
}
First, check out a working example of the layout I have:
http://jsfiddle.net/EPC8c/2/
What I'm trying to do is adding a top margin to this. Since I have most of this built on 100% height, things get a little weird when trying this: http://jsfiddle.net/EPC8c/1/ (fixed link)
The fluid layout now leaves the footer being pushed down past 0 or 100% of the page. This is probably working as intended, but I'm trying to find a solution to not cause this.
Any help with this would be amazing.
HTML
<div id="container">
<header></header>
<div id="content"></div>
<footer></footer>
</div>
CSS
html, body {
background: #ff3333;
margin:0;
padding:0;
height:100%;
}
#container {
position:relative;
background: #FFF;
margin: 0 auto;
width: 200px;
min-height:100%;
}
header {
height: 60px;
background: #888;
}
#content {
background: #FFF;
min-height: 200px;
padding-bottom: 60px; /*FOOTER HEIGHT*/
}
footer {
position:absolute;
bottom: 0;
width: 200px;
height: 60px;
background: blue;
}
Here's a solution, courtesy of this question: CSS 100% height with padding/margin
JSFiddle:
http://jsfiddle.net/EPC8c/5/
HTML:
<div id="wrapper">
<div id="container">
<header></header>
<div id="content">
</div>
<footer></footer>
</div>
</div>
CSS:
#wrapper {
display: block;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
margin-top:20px;
}
It's admittedly not the best solution and it relies on percentage margins, but one route would be to wrap it all in an absolutely positioned div with a percentage upper padding and a negative (equal) percentage bottom padding. Like this:
http://jsfiddle.net/EPC8c/3/
<div id="wrapper">
<div id="container">
<header></header>
<div id="content">
</div>
<footer></footer>
</div>
</div>
CSS:
#wrapper {
position: absolute;
width: 100%;
height: 90%;
padding-top: 10%;
padding-bottom: -10%;
}
how to set three div arranged horizontally like this?
The left one width:150px, the right one width:150px, the center one width are the rest of the pixels, and the center one min-width will be 800px. All the div need a position:relative.
Thanks.
Here we go, html is below:
<div id="wrap">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
<div class="clearBoth"></div>
</div>
and now css below:
#wrap {
width: auto;
position: relative;
}
.left, .right {
width: 150px; //or use 30%
float: left;
}
.center {
float: left;
min-width: 800px; //or use 60%
width: auto;
position: relative;
}
.clearBoth {
clear: both;
}
Use a wrap if you want to define a fixed maximum width.
.wrap {
overflow:hidden;
width:1200px; /* Optional */
}
.left {
float:left;
width:150px;
}
.middle {
float:left;
min-width:800px;
}
.right {
float:left;
width:150px;
}
<div class="wrap">
<div class="left">Left</div>
<div class="middle">Middle</div>
<div class="right">Right</div>
</div>