i have a problem about height properties.
i am making a website and a want to make this : there is a div element which collapse others and this has a child div and when i resize the window height then the parent div get the window height . it is ok but child div not fixing so some child elements are is this not showing . those are stay down of child div ... plase help me ...
i want to see full patch of yellow area but when i resize the browser height some p tags stay down ... how can i fix it ? whatever browser height yellow patch must shown ... please help me ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*, *:before, *:after{
padding:0;
margin:0;
box-sizing: border-box;
}
html,body{
height:100%;
overflow-y: hidden;
}
.d{
}
.d1{
height:100%;
overflow:hidden;
position:relative;
}
.d2{
display:block;
position:relative;
background:yellow;
overflow-y: auto;
height:90%;
}
.d3{
height:90px;
background:blue;
}
</style>
</head>
<body>
<div class="d d1">
<div class="d3">
<p>dadsdsaasd</p>
<p>dadsdsaasd</p>
<p>dadsdsaasd</p>
<p>dadsdsaasd</p>
<p>dadsdsaasd</p>
</div>
<div class="d2">
<p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>sonososososo</p>
</div>
</div>
</body>
</html>
try using position:inherit for the child divs. Hope this works
You can use css calc.
Jsfiddle
.d2
{
height: calc( 100% - 90px);
}
Height in pixels and percentage together doesn't work great usually. Overflow:hidden hides the 90% div since its beyond the viewport size. Remove overflow:hidden for the parent div, body & html tag to view hidden contents. If there is any specific reason for overflow:hidden to top hierarchy. You can still achieve the same by mentioning percentage values for both child div
According to your code
.d2{height:87%}
.d3{height:13%}
Related
I use center tag, but it seems that is not standard in HTML 5. I tried to use CSS instead but it doesn't work for me! I expect in this example the div tag be displayed in center but it won't.
<!doctype html>
<html>
<body style="text-align:center">
<div style="width:100px; height:30px; background-color:rgb(0,0,0)"></div>
</body>
</html>
And this is center tag version: (it works)
<!doctype html>
<html>
<body>
<center>
<div style="width:100px; height:30px; background-color:rgb(0,0,0)"></div>
</center>
</body>
</html>
You can use margin: auto for your div
div {
margin: auto;
width:100px;
height:30px;
background-color:rgb(0,0,0)
}
Also it's better to give your div an id or class name to target it more accurately if your HTML markup become more complex as well as using external CSS instead of inline styles like what you're doing now.
Fiddle Demo
You can use css:
.window{
position:absolute;
top:50%;
left:50%;
margin-top:-140px;
margin-left:-200px;
width:400px;
height:280px;
}
make sure you substract half of the width and height using margins. This way your div will be centered within the window the div is in.
The div tag which you want to put in center in your body must be :
.div-class {
margin: auto;
}
If you use margin top or bottom, you can do this way:
.div-class {
margin-left: auto;
margin-right: auto;
}
I'm trying to establish a layout with in the base three rows: A header, content and footer div.
The two outer most div's are of a fixed height; The center div has to be fluid and adapt itself to the height of the browser screen.
Could someone point me in the right direction how to tackle this with proper CSS? For now I'm not yet interested in a javascript solution. As CSS doesn't provide a clean answer, a javascript solution comes eminent!
This is how far I came:
<div id='header'>Header</div>
<div id='content'>
<div id='innerContent'>
This is the fluid part
</div>
</div>
<div id='footer'>footer</div>
css:
#header {
position:absolute;
top:0px;
left:0px;
height:100px;
z-index:5;
}
#content {
position:absolute;
top:0px;
left:0px;
height:100%;
z-index:2;
}
#innerContent {
margin-top:100px;
height:100%;
}
#footer {
height:400px;
}
EDIT:
I'm sorry, I feel embarassed. I made something similar about a year ago, but at first I didn't think it was possible to adjust it to this situation. Apparently it was.
As I think other's have already said, it is possible to put the footer div at the bottom by positioning it absolutely. The problem is to adjust it's position when the content div gets larger. Since the footer is absolutely positioned it won't follow the content div's flow, which makes it stay at the same place even though the content expands.
The trick is to wrap everything in an absolutely positioned div. It will expand if it's content gets larger, and the footer div will be positioned according to the wrapper's borders instead of the document's borders.
Here's the code. Try to put a bunch of <br /> tags within the content div and you'll see that everything adjusts.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Layout test</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#wrapper {
min-height: 100%;
min-width: 100%;
position: absolute;
}
#header {
height: 100px;
background-color: red;
}
#content {
background-color: gray;
margin-bottom: 50px;
}
#footer {
height: 400px;
min-width: 100%;
position: absolute;
bottom: 0px;
margin-bottom: -350px;
background-color: blue;
}
</style>
</head>
<body>
<div id="wrapper">
<div id='header'>Header</div>
<div id='content'>
Content
</div>
<div id='footer'>footer</div>
</div>
</body>
</html>
ORIGINAL:
Sadly, css lacks a clean way to do this. You don't know the viewport height (which you called h) and therefore can't calculate h-100-50 You have to build your website so that most people will see 50px of the footer div. The way to do that is to set a min-height for the content div.
The min-height value must be derived from some standard viewport height. Google Labs have published their data on viewport sizes for their visitors and made a great visualization of it here:
http://browsersize.googlelabs.com/
I design for my own viewport, which is 620px high (according to google ~80% have this viewport height). Therefore the min-height for the content div should be 620-100-50 = 470 px.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Layout test</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#header {
height: 100px;
background-color: red;
}
#content {
min-height: 470px;
background-color: gray;
}
#footer {
height: 400px;
background-color: blue;
}
</style>
</head>
<body>
<div id='header'>Header</div>
<div id='content'>
Content
</div>
<div id='footer'>footer</div>
</body>
</html>
If I understand your problem correctly I think this might lead you into the right direction.
http://jsfiddle.net/mikevoermans/r6Saq/1/
I'll take a poke at it. Not sure if I read your screenshot correctly but I set the content div to be 50-100px in height.
Here is my jsfiddle: http://jsfiddle.net/AX5Bh/
I am using the min-height and max-height CSS attributes to control the #innerContent div.
If you horizontally expand the result window you will see that some of the text is highlighted . I have set the content to be hidden if it is larger than the #innerContent div. You might want something different. I only highlighted the text with an <em> tag to demonstrate that max-height was working.
If you remove all the text but the first sentence you will see it is 50px in height.
Here is a link to browser support of min-height and max-height: http://caniuse.com/#search=max-height
I have this sample html
<html>
<head>
<style type="text/css">
.div-menu
{
width:300px;
margin-left:20px;
margin-right:20px;
float:left;
border:thin solid;
min-height:600px;
height:auto;
}
.div-content
{
float:left;
min-width:700px;
width:auto;
border:thin solid;
min-height:600px;
height:auto;
padding-right:20px;
}
</style>
</head>
<body>
<div style="margin-top:50px;padding:10px;">
<div class="div-menu">
</div>
<div class="div-content">
<div id='main' style="width:2000px;background-color:lightblue;height:600px">
Hello world
</div>
</div>
</div>
</body>
</html>
when the div main have actual width that larger than page width , the div-contain is break down to the bottom of div-menu , i want to make that div keep by side of div-menu , and the window horizontal scrollbar will appear ,
how can i achieve
Appreciate any suggest
thank
Change this line
<div style="margin-top:50px;padding:10px;">
to
<div style="width:2364px; margin-top:50px;padding:10px;">
specify a width equal to the sum of the effective widths of div-menu and div-content
In this case the width should be 2364px
This is calculated by finding the sum of div_width + margin_widths + padding_widths + border_widths
(300+20+20+2)+(2000+20+2)=2364
You should maintain width and height of the parent DIV according to content inside it.
Check this CSS Box Model to maintain this.
If parent have width 600px then width or height of inner div's should be
Inner Div actual width/height + border width + padding <= 600
So Specify some width to your parent div as per your requirement( 1024px is standard width nowadays) as:
<div style="width:1024px; margin-top:50px;padding:10px;">
then read about the box model and maintain your inner Div width/height.
If there width is not defined then use css overflow and a simple tutorial available here.
for example your content div have not prediction about width/height then use overflow
div
{
overflow:scroll;
}
In CSS3, you can specify in which direction you want to manage:
check these
CSS OVERFLOW-X
example:
blockquote { width: 50px; height: 50px; overflow-x: scroll }
<blockquote style=”width: 50px; height: 50px; overflow-x: scroll”>some text</blockquote>
CSS OVERFLOW-Y
I would like an element to fill the remaining space of a parent div. I have managed to do this, You can see it here "link removed" but the filling div (right) sits underneath the left div. I bascially want the right div to start where the left div finishes.
Hope this make sense.
<html>
<head>
<title></title>
<style type="text/css">
#left {
float:left;
width:180px;
background-color:#ff0000;
height:20px;
}
#right {
width: 100%;
background-color:#00FF00;
height:30px;
}
</style>
</head>
<body>
<div>
<div id="left">Nav</div>
<div id="right">This is the space I need to fill but not go underneath the nav div</div>
</div>
</body>
</html>
On #right, simply remove width: 100%, and add overflow: hidden.
See: http://jsfiddle.net/hJzJf/ - (I'm assuming your heights are just for testing purposes)
Why does this work?
See: http://colinaarts.com/articles/the-magic-of-overflow-hidden/#making-room-for-floats
Set margin-left: 180px; on the #right element. This will offset it by the width of the first element.
http://jsfiddle.net/DHSej/
I want to be able to layout nested divs with these properties:
width: 100%
height: 100%
padding: 10px
I want it to be such that, the children are 100% width and height of the remaining space after padding is calculated, not before. Otherwise, when I have a document like the below example, the child makes the scrollbars appear. But the scrollbars are not the main issue, the fact that the child stretches beyond the width of the parent container is.
I can use all position: absolute declarations, but that doesn't seem right. Here is the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=7">
<title>Liquid Layout</title>
<style>
body, html {
width:100%;
height:100%;
margin:0;
padding:0;
background-color:black;
}
#container {
position:relative;
width:100%;
height:100%;
background-color:red;
opacity:0.7;
}
#child1 {
position:relative;
width:100%;
height:100%;
padding:10px;
background-color:blue;
}
#nested1 {
position:relative;
background-color: white;
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="container">
<div id="child1">
<div id="nested1"></div>
</div>
</div>
</body>
</html>
How do I make it so, using position:relative or position:static, and percent sizes, the percents size the children according to the parent's width/height minus padding and margins? Do I have to resort to position:absolute and left/right/top/bottom?
Thanks for the help,
Lance
I want it to be such that, the children are 100% width and height of the remaining space after padding is calculated, not before.
The shiny futuristic way to do that is:
#something {
width: 100%; height: 100%; padding: 10px;
box-sizing: border-box; -moz-box-sizing: border-boz; -webkit-box-sizing: border-box;
}
However this won't work on IE before version 8.
Do I have to resort to position:absolute and left/right/top/bottom?
That's another way, but ‘edge positioning’ (positioning top and bottom but not height, and similarly for left/right/width) won't work on IE before version 7.
the scrollbars are not the main issue, the fact that the child stretches beyond the width of the parent container is.
Horizontally it's not a problem. Leave width at default auto and it will receive the full width of its parent minus the paddings. The only problem is you don't get that behaviour with height.
A hybrid approach: auto-width, 100% height with box-sizing, and add some hack JS that only runs in IE6-7 to fix up the height there?