Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
So many question & answers are there related to this topic but no where i found the like following mentioned case. All describes If you want to set the height and width in percentage, set the parent height in percentage first but still I did not get clarity.
For example: Following ID and class of block of drupal 7, and my code which starts from the "box1" which I added using body(Editor) of that block.
<div id="block-block-1">
<div class="block-inner">
<div class="block-content">
<div class="box1">
<a class="box2">
<span class="box3">For Title</span>
<span class="box4">For Text</span>
<span class="box5">For Image</span>
</a>
</div>
</div>
</div>
</div>
**So, for which part of code is parent for which one.
Height & width Aspect: Do I have to make the #block-block-1 {height: 100%, width: 100%}, and it will be apply to every one. Or do I have to add at each stage, but if I do that, then automatically all div, a sections will be 100%, that not make any sense.
Position Aspect: Now The other aspect of positioning of Div with combination of Position:relative and Position:absolute, where, it states that parent div should be relative and inside that all div should be absolute and set its position using top, right and left. But same question one's Relative position is other's absolute position, so again it creates contradictory same as height and width.
So, what is the right way to use this height/weight(in percent) and position aspect simultaneously?
A few examples to get you some insight in position and more, hope it helps to bring your css-skills to a next level.
Important read html code first and look what happen in result
First of all, understand block-level/inline elements.
* {
outline: 1px solid
}
div.iHaveKids {
padding: 25px
}
/* all childs of div*/
div > * {
background-color: red
}
b {
background-color: yellow;
width: 100%;
}
b.running {
margin-left: 40px
}
span {
background-color: pink
}
div.clearMe {
width: 50px;
}
<div>This is a beatifull block-level element</div>
<span>This is inline element</span>
<div>a block-level element width is, if not set, 100%</div>
<div class="iHaveKids">a block-level element height is, if not set, designed to fit hes childeren
<div>I'm a child</div>
<div>Me tooooooo</div>
<div><b>A block element can have margins and/or paddings but i'm a inline element</b>
</div>
<div><b>Even when i have a width set i just ignore them, because i'm a inline element</b>
</div>
<div><b class="running away">however i can set margin-left and/or margin-right</b>
</div>
</div>
<span>i'm an inline element<span>me toooo and i'm inside an inline element</span>
<div class="clearMe">block-level element</div>
<div>block-level elements start at a new-line in the document even if there is enough room</div>
</span>
Now position:
* {
outline: 1px solid;
}
div.example {
background: red;
}
.example.ex1,
.example.ex2,
.example.ex3,
.example.ex4,
.example.ex5,
.example.ex10 {
position: absolute;
}
span {
background-color: yellow
}
div.ex4 {
z-index: 2500;
}
.example.ex6,
.example.ex7,
.example.ex8,
.example.ex9 {
position: relative;
}
.ex8,
.ex9 {
top: 40px;
}
.ex9 {
width: 500px;
height: 500px;
}
.ex10 {
bottom: 0;
}
<div>im a block-level element, i have by default position:static</div>
<div class="example ex1">im a absolute element, i have position:absolute
<span>my parent has an absolute position i'm just an inline element</span>
</div>
<div class="example ex2">im a absolute element, i have position:absolute
<span>hm hm hm hm hm my parent has also position:absolute, if no top,left,bottom,right is defined than i will place my self in the normal document flow without looking to position:absolute elements, floated elementes, position:fixed elements, position, relative elements</span>
<span>if two or more position:absolute elements are in the same place without a stacking-order than is the one that was latest in document-flow who get higher stakcing-order</span>
</div>
<div>
<div>make</div>
<div>some</div>
<div>room</div>
<div>for example 3</div>
<div>for example 4</div>
<div>for example 5</div>
</div>
<div class="example ex3">Example 3</div>
<div class="example ex4">Example 4:: ex3, ex5 has no stacking order but ex4 does, autor-define stacking are higher than browser setted stackings</div>
<div class="example ex5">Example 5</div>
<div>
<div>make</div>
<div>some</div>
<div>room</div>
<div>for example 6</div>
<div>for example 7</div>
<div>for example 8</div>
</div>
<div class="example ex6">Example 6, i have position: relative</div>
<div class="example ex7">Example 7, i have position: relative<span>hm hm hm hm hm my parent has also position:relative, if no top,left,bottom,right is defined than i will place my self in the normal document flow</span>top
</div>
<div class="example ex8">Example 8, i have position: relative and bottom: 40px;<span>meaning i will move myself 40px away from the top where the document-flow woulkd place me</span>
</div>
<div class="example ex9">I have position:relative i'm also a block-element and have a width of 500px and an height of 500px; i also have top: 40px;
<div class="example ex10">i'm a block-level element with position:absolute inside of an element with position:relative i also have bottom: 0 so i place myself 0px away from the bottom line of my <b>nearest positioned ancestor</b> if i have no nearest positioned ancestor i take
the document root</div>
</div>
Than finally % width and height
div {
position: relative;
}
div > div {
position: absolute;
}
div.parent {
top: 10px;
height: 400px;
background-color: red;
}
div.child {
background-color: yellow;
top: 10%;
bottom: 10%;
}
<div class="parent">
i'm position:realtive;
<div class="child">
i'm position:absolute;
<br>i first look top, right, bottom, left
<br>than i look to my content and fit even if i'm a block-level element
<br>to calculate percentage i look to my the parent
<br>my parent is height: 400px
<br>i use top: 10%;
<br>what means i will set 40px
<br>
</div>
</div>
To finally answer your question:
So, what is the right way to use this height/weight(in percent) and position aspect simultaneously?
Percentages are based on maximum available space, in last example top: 400px; so 10% == 40px once you understand how things behave ( root, parent, child, siblings, ancestor,.. ) you find this kind of work too so easy for you. Read, read and read even more to learn about difference between any ground of elements.
Do I have to make the #block-block-1 {height: 100%, width: 100%}, and it will be apply to every one.
Like in examples said, apply 'width: 100%`; to an block-level element has no use. If you ask how child element behave on dimension settings (width, height, top, right, bottom, left, margin, padding,..) you need to know what kind of element it is (block, inline, grid, flex, table, list, replaced,... element) and know how it behaves.
But same question one's Relative position is other's absolute position, so again it creates contradictory same as height and width.
An element with position: absolute; looks for the nearest positioned ancestor element, if not set i will look to document.root
useful resources:
Percentage on Mozilla
Lenght properties on css-tricks
The Difference Between “Block” and “Inline” on impressivewebs
Here is an example so you can understand how it works.
The parent block .box2 100px from the left edge because of the margin.
If you want to position elements with absolute, but with the .box2 as a reference (relatively to it), you have to add position: relative on the parent element.
.box3 is 0px from the left edge of .box2
.box4 is 100px from the left edge of .box2
.box5 is 100px from the right edge of .box2
You can also use top and bottom properties, of course.
.box2 {
border: 1px solid red;
display: block;
height: 2em;
margin-left: 100px;
position: relative;
width: 400px;
}
.box2 span {
border: 1px solid blue;
position: absolute;
}
.box3 {
left: 0;
}
.box4 {
left: 100px;
}
.box5 {
right: 100px;
}
<a class="box2">
<span class="box3">For Title</span>
<span class="box4">For Text</span>
<span class="box5">For Image</span>
</a>
I'm trying to implement solution similar to provided here:
https://stackoverflow.com/a/12242226
The problem with it (for me) is that it does not allow to restrict height of inner div.
So I've updated solution as follows:
<style type='text/css'>
html, body {
height: 400px;
width: 100%;
margin: 0;
}
.wrapper {
display: table;
height: 400px;
width: 100%;
background: yellow;
}
.component {
display: table-row;
background: gray;
}
.content {
display: table-cell; /* height is dynamic, and will expand... */
height: 100%; /* ...as content is added (won't scroll) */
background: turquoise;
}
.contentRel {
height: 100%;
background: blue;
position: relative;
}
.contentRemaining {
background: red;
position: absolute;
top:30px;
bottom:0;
left: 0;
right: 0;
overflow: auto;
}
</style>
<body>
<div class="wrapper">
<div class="component">
<h1>Component</h1>
<p>of variable height</p>
</div>
<div class="content">
<div class='contentRel'>
<div>100% Component Header</div>
<div class='contentRemaining'>
<div style='height:1000px'>
100% Component Content
</div>
</div>
</div>
</div>
<div class="component">
<h3>Other</h3>
<p>componet of variable height</p>
</div>
</div>
</body>
http://jsfiddle.net/UrcV7/
It works as I need in FF (height of contentRel div is set to 320px - height of wrapper div minus sum of heights of component divs), but doesn't work in IE: height of (contentRel div is set to 400px - same as height of wrapper div).
Does anybody know how to fix it?
Here is my problem description (maybe it is another solution for it):
I have an outer div with height set to some px values (wrapper div in example).
In that div I have several other divs which can be hidden dynamically by some JS code.
All divs except of 1 has some height. though it is unknown to me (component divs in example).
I want that one remaining div (content div in example) to:
a. Use all remaining height of wrapper div
b. Have a header of some predefined height (100% Component Header part in example above)
c. Have a child div with height "100% of content div" - "height of header" (100% Component Content in example above)
d. To not to be taller than "height of wrapper div minus sum of heights of component divs" (scrollbars are ok)
I am trying to position a child DIV at the bottom of a parent DIV, but I would also like the contents of the child DIV to help dictate the dimensions of the parent DIV. As I have it right now, the child DIV doesn't affect the width/height of the parent DIV.
Here is a sample of my HTML/CSS code:
//HTML code:
<div id="parent">
<h3>Top Aligned Title</h3>
<div id="child"></div>
</div>
//CSS code:
#parent {
background-color:#222;
position: relative;
height: 500px;
}
#child {
background-color:#444;
position: absolute;
bottom: 0px;
width: 100px;
height: 200px;
}
What do I need to do it achieve what I am trying to do? I could forgo the absolute/relative CSS rules and simply create a table within the parent DIV which would allow me to achieve both bottom alignment and content that dictates the parent's dimensions.
However, I'd like to know if there a way to do this in CSS and without having to set the width of the parent DIV.
thanks in advance!
The short answer is that what you are asking basically can't be done with pure CSS / HTML. (at least without tables) You'd need Javascript that would read #child's width/height and then do the calculation you want to do (I don't know) and set a new height/width to #parent.
Otherwise, if you mean that you want #child's height/width to change according to its content, of course this is native CSS, just set it's height/width to auto and then start adding text inside it you'll see it will start growing to fit your content inside.
As the #child is positioned absolute, then it is taken OUT of the normal flow of the document, therefore it will not affect the #parent.
With modern CSS, this is doable.
HTML:
<div id="parent">
<h3>Top Aligned Title</h3>
<div id="child">
<p>CHILD ELEMENT</p>
</div>
</div>
CSS:
#parent {
background:red;
height: 500px;
position:relative;
}
#child {
background:green;
position: absolute;
top:100%;
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
width: 100px;
}
http://jsfiddle.net/Bushwazi/bpe5s6x3/
transform:translateY(-100%); is the trick. It's math is based on the element's box-model.
You could also combine top:50%; with transform:translateY(-50%); to center it.
You can swap top for left and translateY for translateX to position the element horizontally.
Here you go
HTML:
<main id="parent">
<div class="popup">Top Aligned Title
<div class="content">
Content
</div>
</div>
</main>
CSS:
#parent {
width: 120px;
}
.popup {
position: relative;
margin-top: 48px;
}
.content {
left: 0;
position: absolute;
background: green;
width: 100%;
}
http://jsfiddle.net/8L9votay/
You can play around with flex and zero-width/height.
I've recently come up with the following solution (for width):
#parent {
display: inline-flex;
flex-direction: column;
background: #518cff;
color: #fff;
}
#child-wrapper {
height: 0; /* This can also be max-height, but height is just enough */
}
#child {
transform: translateY(-100%); /* If you need to align child to the bottom */
background: #b40000;
color: #fff;
}
<div id="parent">
<h3>Top Aligned Title</h3>
<div id="child-wrapper"> <!-- This is the solution -->
<div id="child">
Child's content that is longer than parent's
</div>
</div>
</div>
The following code has a DIV that needs to be positioned at the top of the container, another at the bottom and then the content needs to come through in the middle.
<div style="position:absolute; top:0; width:100%; height:40px"></div>
<div class="howto"></div>
<div style="position:absolute; bottom:0; width:100%; height:40px"></div>
So we don't know the height of the containing DIV. How without JS can the div with class howto have the height of the container DIV less the height of the absolute positioned div at the top and bottom so as to contain content between these 2 DIVs.
For what you wish to accomplish, this is one possible solution:
#tinkerbin: http://tinkerbin.com/QsaCPgR6
HTML:
<div class="container">
<div class="header"></div>
<div class="howto">
Has height set to auto. You may change that if you want to.
</div>
<div class="footer"></div>
</div>
CSS:
.container {
position: relative;
padding: 40px 0; /* top and bottom padding = .header and .footer padding*/
}
.header,
.footer {
position: absolute;
height: 40px;
width: 100%;
}
.header {
top: 0;
}
.footer {
bottom: 0;
}
.howto {
height: /*specifiy one if you wish to*/;
}
As far as I know there isn't a pure CSS way to do what you're trying to do without JS.
See this previous post on SA:
Make a div fill the height of the remaining screen space
I have div that contains 2 divs in it. One of the child divs has static height 2em, and I want the other one to vertically fill the rest of the space of the parent div. How do I do this?
Edit: I need the parent div to fill the screen.
This depends on exactly what you want to achieve. Getting a fixed top and variable bottom where the container is only as large as it needs to be for the two children.
Assuming:
<div id="parent">
<div id="top"></div>
<div id="bottom"></div>
</div>
use:
#top { height: 2em; }
and the bottom div will be as large as it needs to be. You can make the bottom fixed height and achieve the same thing.
But I suspect what you want to do is have the outer div fixed height (say 100%). That gets much harder. The problem is that there is no way in CSS of saying "height of 100% minus 2em" without using an (ill-advised) CSS expression.
One approach is to overlay the top with the bottom.
#outer { position: relative; }
#top { position: absolute; height: 2em; top: 0; left: 0; width: 100%; }
#bottm { height: 100%; padding-top: 2em; }
The top div actually overlays the bottom. This is fine so long as you don't want a border.
You can use Faux Columns if you're using an image for the background or just move the background color back to #parent to give the appearance of filling the screen with the #bottom div. It would fill the page by giving it a 100% height (as long as html and body also get height: 100%).
Example:
<head>
<title>TITLE</title>
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; }
#parent { height: 100%; background: #f08; }
#top { height: 2em; background: #80f; }
</style>
</head>
<body>
<div id="parent">
<div id="top">TOP DIV</div>
<div id="bottom">THE REST</div>
</div>
Since CSS is just about styling, giving the appearance of 100% height is the same as having 100% height. Right?