i have an absolute div inside a relative div and i want to make it of a fixed dimension. my problem is that the height is ignored.
this is my html structure:
<div id="wrap">
<div>
<h1>test</h1>
</div>
<div id="swipe">
<br/>
</div>
</div>
and this is my css:
body {
background-color: #7ECEFD;
margin: 0;
padding: 0;
}
#wrap {
width: 100%;
margin: auto;
overflow: hidden;
position: relative;
}
#swipe {
background-color: white;
position: absolute;
top:0;
left:10px;
width:100%;
height: 500px;
}
why? how can i resolve it with css? any other trick (jquery)?
http://jsfiddle.net/nkint/XQzJf/
It is 500px high, but most of it is hidden due to the overflow: hidden on #wrap. You need to either remove that or make it big enough to contain #swipe.
html, body, #wrap {
height: 100%;
}
Related
a content inside div exceeding the fixed size which is decided by css.
<style>
#fixeddiv {
position: fixed;
margin: auto;
max-height: 300px;
max-width: 700px;
}
</style>
<div id="fixeddiv">
<div id="M775568ScriptRootC1273665"></div>
<script src="https://jsc.adskeeper.co.uk/c/r/creditkarma.gq.1253664.js" async>
</script>
</div>
The content inside fixeddiv should be fixed between 300px height and 700px width but it exceeding it and position of the content displaying outside of fixed size.
Edited: Child DIV contain responsive native ad and i am trying to fix the position with parent DIV because i do not make modification inside the ad copy due to advertising network policy.
<style>
#fixeddiv {
position: fixed;
margin: auto;
max-height: 300px;
max-width: 700px;
width:100%;
height:100%;
}
#someotherdiv {
height:100%;
}
</style>
<div id="fixeddiv">
<div id="someotherdiv"> contents </div>
</div>
#fixeddiv > div{
display: block;
max-width: 100%;
height: auto;
vertical-align: top;
}
It really depends on the content inside the fixed div. You can also add overflow:hidden so the child content wont overflow the fixed div boundaries
Apply width/height values to image not container.
#fixeddiv {
position: fixed;
margin: auto;
border: 20px solid;
}
img {
max-height: 300px;
max-width: 500px;
}
<div id="fixeddiv">
<img src="https://pixy.org/src/20/201310.jpg">
</div>
I want the carousel DIV (s7) to expand to the height of the entire screen. I haven't an idea as to why it's not succeeding. To see the page you can go here.
body {
height: 100%;
color: #FFF;
font: normal 28px/28px'HelveticaWorldRegular', Helvetica, Arial, Sans-Serif;
background: #222 url('') no-repeat center center fixed;
overflow: hidden;
background-size: cover;
margin: 0;
padding: 0;
}
.holder {
height: 100%;
margin: auto;
}
#s7 {
width: 100%;
height: 100%: margin: auto;
overflow: hidden;
z-index: 1;
}
#s7 #posts {
width: 100%;
min-height: 100%;
color: #FFF;
font-size: 13px;
text-align: left;
line-height: 16px;
margin: auto;
background: #AAA;
}
<div class="nav">
<a class="prev2" id="prev2" href="#">
<img src="http://static.tumblr.com/ux4v5bf/ASslogxz4/left.png">
</a>
<a class="next2" id="next2" href="#">
<img src="http://static.tumblr.com/ux4v5bf/swslogxmg/right.png">
</a>
</div>
<div class="holder">
<tr>
<td>
<div id="s7">
{block:Posts}
<div id="posts">
In order for a percentage value to work for height, the parent's height must be determined. The only exception is the root element <html>, which can be a percentage height. .
So, you've given all of your elements height, except for the <html>, so what you should do is add this:
html {
height: 100%;
}
And your code should work fine.
* { padding: 0; margin: 0; }
html, body, #fullheight {
min-height: 100% !important;
height: 100%;
}
#fullheight {
width: 250px;
background: blue;
}
<div id=fullheight>
Lorem Ipsum
</div>
JsFiddle example.
Since nobody has mentioned this..
Modern Approach:
As an alternative to setting both the html/body element's heights to 100%, you could also use viewport-percentage lengths:
5.1.2. Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ units
The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.
In this instance, you could use the value 100vh (which is the height of the viewport) - (example)
body {
height: 100vh;
}
Setting a min-height also works. (example)
body {
min-height: 100vh;
}
These units are supported in most modern browsers - support can be found here.
You will also need to set 100% height on the html element:
html { height:100%; }
Alternatively, if you use position: absolute then height: 100% will work just fine.
You should try with the parent elements;
html, body, form, main {
height: 100%;
}
Then this will be enough :
#s7 {
height: 100%;
}
if you want, for example, a left column (height 100%) and the content (height auto)
you can use absolute :
#left_column {
float:left;
position: absolute;
max-height:100%;
height:auto !important;
height: 100%;
overflow: hidden;
width : 180px; /* for example */
}
#left_column div {
height: 2000px;
}
#right_column {
float:left;
height:100%;
margin-left : 180px; /* left column's width */
}
in html :
<div id="content">
<div id="left_column">
my navigation content
<div></div>
</div>
<div id="right_column">
my content
</div>
</div>
This may not be ideal but you can allways do it with javascript.
Or in my case jQuery
<script>
var newheight = $('.innerdiv').css('height');
$('.mainwrapper').css('height', newheight);
</script>
If you absolutely position the elements inside the div, you can set the padding top and bottom to 50%.
So something like this:
#s7 {
position: relative;
width:100%;
padding: 50% 0;
margin:auto;
overflow: hidden;
z-index:1;
}
In the page source I see the following:
<div class="holder">
<div id="s7" style="position: relative; width: 1366px; height: 474px; overflow: hidden;">
If you put the height value in the tag, it will use this instead of the height defined in the css file.
Here's another solution for people who don't want to use html, body, .blah { height: 100% }.
.app {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow-y: auto;
}
.full-height {
height: 100%;
}
.test {
width: 10px;
background: red;
}
<div class="app">
<div class="full-height test">
</div>
Scroll works too
</div>
Just use this in your css
html, body {
height: 100%;
}
You'll be able to see 100% height for all sub classes.
Try to play around also with the calc and overflow functions
.myClassName {
overflow: auto;
height: calc(100% - 1.5em);
}
I want the carousel DIV (s7) to expand to the height of the entire screen. I haven't an idea as to why it's not succeeding. To see the page you can go here.
body {
height: 100%;
color: #FFF;
font: normal 28px/28px'HelveticaWorldRegular', Helvetica, Arial, Sans-Serif;
background: #222 url('') no-repeat center center fixed;
overflow: hidden;
background-size: cover;
margin: 0;
padding: 0;
}
.holder {
height: 100%;
margin: auto;
}
#s7 {
width: 100%;
height: 100%: margin: auto;
overflow: hidden;
z-index: 1;
}
#s7 #posts {
width: 100%;
min-height: 100%;
color: #FFF;
font-size: 13px;
text-align: left;
line-height: 16px;
margin: auto;
background: #AAA;
}
<div class="nav">
<a class="prev2" id="prev2" href="#">
<img src="http://static.tumblr.com/ux4v5bf/ASslogxz4/left.png">
</a>
<a class="next2" id="next2" href="#">
<img src="http://static.tumblr.com/ux4v5bf/swslogxmg/right.png">
</a>
</div>
<div class="holder">
<tr>
<td>
<div id="s7">
{block:Posts}
<div id="posts">
In order for a percentage value to work for height, the parent's height must be determined. The only exception is the root element <html>, which can be a percentage height. .
So, you've given all of your elements height, except for the <html>, so what you should do is add this:
html {
height: 100%;
}
And your code should work fine.
* { padding: 0; margin: 0; }
html, body, #fullheight {
min-height: 100% !important;
height: 100%;
}
#fullheight {
width: 250px;
background: blue;
}
<div id=fullheight>
Lorem Ipsum
</div>
JsFiddle example.
Since nobody has mentioned this..
Modern Approach:
As an alternative to setting both the html/body element's heights to 100%, you could also use viewport-percentage lengths:
5.1.2. Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ units
The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.
In this instance, you could use the value 100vh (which is the height of the viewport) - (example)
body {
height: 100vh;
}
Setting a min-height also works. (example)
body {
min-height: 100vh;
}
These units are supported in most modern browsers - support can be found here.
You will also need to set 100% height on the html element:
html { height:100%; }
Alternatively, if you use position: absolute then height: 100% will work just fine.
You should try with the parent elements;
html, body, form, main {
height: 100%;
}
Then this will be enough :
#s7 {
height: 100%;
}
if you want, for example, a left column (height 100%) and the content (height auto)
you can use absolute :
#left_column {
float:left;
position: absolute;
max-height:100%;
height:auto !important;
height: 100%;
overflow: hidden;
width : 180px; /* for example */
}
#left_column div {
height: 2000px;
}
#right_column {
float:left;
height:100%;
margin-left : 180px; /* left column's width */
}
in html :
<div id="content">
<div id="left_column">
my navigation content
<div></div>
</div>
<div id="right_column">
my content
</div>
</div>
This may not be ideal but you can allways do it with javascript.
Or in my case jQuery
<script>
var newheight = $('.innerdiv').css('height');
$('.mainwrapper').css('height', newheight);
</script>
If you absolutely position the elements inside the div, you can set the padding top and bottom to 50%.
So something like this:
#s7 {
position: relative;
width:100%;
padding: 50% 0;
margin:auto;
overflow: hidden;
z-index:1;
}
In the page source I see the following:
<div class="holder">
<div id="s7" style="position: relative; width: 1366px; height: 474px; overflow: hidden;">
If you put the height value in the tag, it will use this instead of the height defined in the css file.
Here's another solution for people who don't want to use html, body, .blah { height: 100% }.
.app {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow-y: auto;
}
.full-height {
height: 100%;
}
.test {
width: 10px;
background: red;
}
<div class="app">
<div class="full-height test">
</div>
Scroll works too
</div>
Just use this in your css
html, body {
height: 100%;
}
You'll be able to see 100% height for all sub classes.
Try to play around also with the calc and overflow functions
.myClassName {
overflow: auto;
height: calc(100% - 1.5em);
}
I want the carousel DIV (s7) to expand to the height of the entire screen. I haven't an idea as to why it's not succeeding. To see the page you can go here.
body {
height: 100%;
color: #FFF;
font: normal 28px/28px'HelveticaWorldRegular', Helvetica, Arial, Sans-Serif;
background: #222 url('') no-repeat center center fixed;
overflow: hidden;
background-size: cover;
margin: 0;
padding: 0;
}
.holder {
height: 100%;
margin: auto;
}
#s7 {
width: 100%;
height: 100%: margin: auto;
overflow: hidden;
z-index: 1;
}
#s7 #posts {
width: 100%;
min-height: 100%;
color: #FFF;
font-size: 13px;
text-align: left;
line-height: 16px;
margin: auto;
background: #AAA;
}
<div class="nav">
<a class="prev2" id="prev2" href="#">
<img src="http://static.tumblr.com/ux4v5bf/ASslogxz4/left.png">
</a>
<a class="next2" id="next2" href="#">
<img src="http://static.tumblr.com/ux4v5bf/swslogxmg/right.png">
</a>
</div>
<div class="holder">
<tr>
<td>
<div id="s7">
{block:Posts}
<div id="posts">
In order for a percentage value to work for height, the parent's height must be determined. The only exception is the root element <html>, which can be a percentage height. .
So, you've given all of your elements height, except for the <html>, so what you should do is add this:
html {
height: 100%;
}
And your code should work fine.
* { padding: 0; margin: 0; }
html, body, #fullheight {
min-height: 100% !important;
height: 100%;
}
#fullheight {
width: 250px;
background: blue;
}
<div id=fullheight>
Lorem Ipsum
</div>
JsFiddle example.
Since nobody has mentioned this..
Modern Approach:
As an alternative to setting both the html/body element's heights to 100%, you could also use viewport-percentage lengths:
5.1.2. Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ units
The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.
In this instance, you could use the value 100vh (which is the height of the viewport) - (example)
body {
height: 100vh;
}
Setting a min-height also works. (example)
body {
min-height: 100vh;
}
These units are supported in most modern browsers - support can be found here.
You will also need to set 100% height on the html element:
html { height:100%; }
Alternatively, if you use position: absolute then height: 100% will work just fine.
You should try with the parent elements;
html, body, form, main {
height: 100%;
}
Then this will be enough :
#s7 {
height: 100%;
}
if you want, for example, a left column (height 100%) and the content (height auto)
you can use absolute :
#left_column {
float:left;
position: absolute;
max-height:100%;
height:auto !important;
height: 100%;
overflow: hidden;
width : 180px; /* for example */
}
#left_column div {
height: 2000px;
}
#right_column {
float:left;
height:100%;
margin-left : 180px; /* left column's width */
}
in html :
<div id="content">
<div id="left_column">
my navigation content
<div></div>
</div>
<div id="right_column">
my content
</div>
</div>
This may not be ideal but you can allways do it with javascript.
Or in my case jQuery
<script>
var newheight = $('.innerdiv').css('height');
$('.mainwrapper').css('height', newheight);
</script>
If you absolutely position the elements inside the div, you can set the padding top and bottom to 50%.
So something like this:
#s7 {
position: relative;
width:100%;
padding: 50% 0;
margin:auto;
overflow: hidden;
z-index:1;
}
In the page source I see the following:
<div class="holder">
<div id="s7" style="position: relative; width: 1366px; height: 474px; overflow: hidden;">
If you put the height value in the tag, it will use this instead of the height defined in the css file.
Here's another solution for people who don't want to use html, body, .blah { height: 100% }.
.app {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow-y: auto;
}
.full-height {
height: 100%;
}
.test {
width: 10px;
background: red;
}
<div class="app">
<div class="full-height test">
</div>
Scroll works too
</div>
Just use this in your css
html, body {
height: 100%;
}
You'll be able to see 100% height for all sub classes.
Try to play around also with the calc and overflow functions
.myClassName {
overflow: auto;
height: calc(100% - 1.5em);
}
I would like to have a html/css layout, which has a div#header and div#body as direct children of body tag. I want div#body to fill the remaining space and I do not want to use JavaScript. I know it is possible if you know the exact height of the div#header. But i do not want to fix that.
example with fixed div#header
<head>
<style>
html, body {
position: relative;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
div {
width: 100%;
}
#header {
position: relative;
<!-- i want to remove height because i want the header to size itself
dependent on it's content -->
height: 100px;
background-color: red;
}
#body {
<!-- I want to make the body position relative and set top to 0
but that does not work as expected.-->
position: absolute;
top: 100px;
margin: 0;
bottom: 0;
background-color: green;
height: auto;
}
</style>
</head>
<body>
<div id="header">header</div>
<div id="body">body</div>
</body>
Please let me know if there is any alternative which uses divs and css.
Many thanks in advance!
You can set the min-height of the body div to 100% to stretch out the body div (I've changed the body bg color to make it more obvious).
However, I'm not 100% clear on your second requirement (<!-- I want to make the body position relative and set top to 0 but that does not work as expected.-->)
Fiddle here
Here is the updated answer: what i have done is to make the parent html and body to display as a table and other divs to have properties of table row and this css will make them capture the whole screen area.
Now i have given the header height of auto.
and
#body is inheriting the other space.
Try this: http://jsbin.com/ezozeb/5/edit
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display:table;
}
#header {
background-color: red;
display:table-row;
height:auto;
}
#body {
background-color: green;
display:table-row;
height:inherit;
}
First of all, delete the height and width of the body element.
You can use page wrappers to make that happen:
#PageWrapper
{
width: 844px;
background-color: ##4628C4;
margin: auto;
}
#PageContentWrapper
{
width: 659px;
float: left;
background-color: #e1e1e1;
min-height: 500px;
padding: 10px;
}
The pagecontentwrapper sets the minimum height to 500px.
In html you can then assign these identifiers to the body and divs
<html>
<head>
<link...>
</head>
<body id="PageWrapper">
<div id="PageContentWrapper">
Content of the body
</div>
</body>
</html>
If you want to make a div scrollable, you should define a height and/or width and add this to the css:
overflow-x:auto; <!--horizontal-->
overflow-y:auto; <!--vertical-->
For example, if you set the pagewrappers height to 1000 (not the min-heigt) and overflow-y: auto; then the scrollbars will appear when content get out of bounds.
If you want to make the header always on top, you should apply something like this:
#PageWrapper
{
width: 844px;
background-color: ##4628C4;
margin: auto;
}
#Header
{
background-color:#aaaaaa;
width: 844px;
height: 240px;
}
#PageContentWrapper
{
width: 659px;
height: 700px;
overflow-y: auto;
float: left;
background-color: #e1e1e1;
padding: 10px;
}
and in html
<html>
<head>
<link...>
</head>
<body id="PageWrapper">
<div id=Header>
Headertext
</div>
<div id="PageContentWrapper">
Content of the body
</div>
</body>
</html>