What's happening is that with this code:
HTML
<div class="one">
<div class="will-overflow">
</div>
</div>
CSS
html, body {
width: 100%;
height: 100%;
}
.one {
height: 100%;
background: red;
}
.one .will-overflow {
width: 20%;
height: 2000px;
background: blue;
}
I get a result like this:
Demo
http://jsfiddle.net/kM46e/
Question
Is there anyway to expand the div.one height to fit the div.will-overflow. This is just an example, the content of that div is dynamic.
html, body {
width: 100%;
height: 100%;
}
.one {
min-height: 100%;
background: red;
}
.one .will-overflow {
width: 20%;
height: 1000px;
background: blue;
}
By changing .one's height into min-height, you make it stretchy. However, now height: 100% of .will-overflow doesn't work, since without anything to stretch it, .one will have height of 0; so I change the height to 1000px to simulate some arbitrary-length content. Change it to a small value like 10px to check that it will still allow .one to fill the entire viewport.
Height correct is 100%.
.one .will-overflow {
width: 20%;
height: 120%;
background: blue;
}
http://jsfiddle.net/kM46e/1/
Related
I need to draw a div with height of entire document. An id named "background" should have the height equal to the content. I am trying to get the result by getting the scrollHeight. I already know the height from the code below but I don't know how to put the value into css. Thank you in advance for any help!
document.getElementById("background").text = ("scrollHeight : " + $(".demo").prop("scrollHeight"));
.content {
background: #eee;
width: 100%;
height: 2000px;
}
#background {
width: 200px;
background: #000;
position: absolute;
top: 0;
left: 0;
height: 100%;
}
<div id="background"></div>
<div class="content"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
One way is to use getComputedStyle
document.querySelector('#background').setAttribute('style','height:'+ window.getComputedStyle(document.querySelector('.content')).getPropertyValue('height'));
.content {
background: #eee;
width: 100%;
height: 2000px;
}
#background {
width: 200px;
background: #000;
position: absolute;
top: 0;
left: 0;
/*height: 200px;*/
}
<div id="background"></div>
<div class="content"></div>
To have the same height for the background every time you change the content height it has to be a child of content.
And for the background set the height to inherit
.content {
background: #eee;
width: 100%;
height: 2000px;
}
#background {
width: 200px;
background: #000;
position: absolute;
top: 0;
left: 0;
height: inherit;
}
<div class="content">
<div id="background"></div>
</div>
Hope I could help you.
document.getElementById("background").style.height = <get .content height>
https://www.w3schools.com/jsref/prop_style_height.asp
I'm trying to make a fixed box with 980px width and 500px height scrolling inside a div with 100% width and 1500px height, but it is not working at all.
That's what I did: https://jsfiddle.net/zjuyuhmz/2/embedded/result/
The box is moving when the page scrolls, and I want to make scroll only if the mouse is inside of the div.
Is this possible??
Html:
<div id="wrapper">
<div class="main">
<div class="container">
<div class="container2">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</div>
</div>
</div>
</div>
Css:
#wrapper {
position: relative;
width: 100%;
height: 100%;
color: #a3265e;
font-family: 'GillSans-SemiBold';
}
.main {
border: 1px solid red;
position: relative;
width: 100%;
height: 100%;
margin: 0 auto;
padding-top: 380px;
}
.container {
border: 1px solid green;
position: relative;
width: 100%;
height: 500px;
margin: 0 auto;
overflow: scroll;
}
.container2 {
height: 1500px;
margin: 0 auto;
}
.test {
width: 940px;
height: 500px;
position: fixed;
left: 50%;
margin-left: -480px;
background: black;
}
You need to write javascript code, where you can get cursor position and depending on that enable scroll event.
Replace the css for .test for this:
.test {
width: 940px;
height: 500px;
position: absolute;
left: 50%;
margin-left: -480px;
background: black;
}
.test:focus {
position:fixed;
}
This means: when the element with id "test" has the focus on, make it's position fixed. If not, make it's position absolute.
I have 2 divs:
A header div at the top of the page with a set height of 150px.
A container div sitting under the header div.
What I would like is for the container div to be dynamic and resize to 100% of the remaining space underneath the header div.
I have tried putting in height: 100% but this makes the page need to scroll. I presume it is making the div 100% of the browser height rather than 100% of the remaining body's height.
How can I make it so that the container div simply resizes its height to the remaining body space?
Please find the relevant code below:
body,
html {
margin: 0;
height: 100%;
}
#header {
width: 100%;
height: 150px;
background-color: #999999;
}
#container {
width: 760px;
height: 100%;
background-color: #CCCCCC;
margin: 0 auto;
}
<div id="header"></div>
<div id="container"></div>
You can simply do that by using some math with the calc() CSS function. Subtract 150px (the header size) from 100%. This is dynamically calculated.
body,
html {
margin: 0;
height: 100%;
}
#header {
width: 100%;
height: 150px;
background-color: #999999;
}
#container {
width: 760px;
height: calc(100% - 150px);
background-color: #CCCCCC;
margin: 0 auto;
}
Compatibility: calc() is supported in most modern browsers and IE 9 +
Example fiddle and snippet below:
body,
html {
margin: 0;
height: 100%;
}
#header {
width: 100%;
height: 150px;
background-color: #999999;
}
#container {
width: 760px;
height: calc(100% - 150px);
background-color: #CCCCCC;
margin: 0 auto;
}
<div id="header"></div>
<div id="container"></div>
I think the correct modern way to acomplish this without css hacks is with FlexBox, which as of the writting of this post is supported by all modern browsers. (you can check browser compatibility here)
It also gives you more flexibility. If you later decide to add new rows (or even side columns) is very easy to acomplish without any calculations.
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#container {
display: flex; /* Activates FlexBox Model */
flex-direction: column; /* Divs are spanned vertically */
width: 100%;
height: 100%;
}
#header {
background-color: #ccc;
height: 150px;
}
#content {
background-color: #888;
flex-grow: 1;
}
<div id="container">
<div id="header">My header with some stuff</div>
<div id="content">My content</div>
</div>
The outer container has to have position: relative and the div that you want to stretch to the bottom has to have position: absolute. This solution is pure css with no calls to calc().
body, html {
margin: 0;
height: 100%;
}
#container {
position: relative;
width: 100%;
height: 100%;
}
#header {
height: 150px;
width: 100%;
background-color: #999999;
}
#mainContent {
width: 760px;
top: 150px;
bottom: 0;
right: 0;
left: 0;
background-color: #CCCCCC;
margin: 0 auto;
position: absolute;
}
JSFiddle: http://jsfiddle.net/wt0k73bz/
I am trying to create a two-column, full-screen magazine viewer, with a fixed width banner on the left. The right column will be responsive.
Utilising the display:table; method I have created the following:
http://jsfiddle.net/pouncebounce/pTeBP/2/
HTML
<div class="tbl_con">
<div class="tbl_row">
<div class="tbl_cell" id="banner">
</div>
<div class="tbl_cell" id="publication">
</div>
</div>
</div>
<script>
var viewer = new com.zmags.api.Viewer();
viewer.setPublicationID("b129d2b8");
viewer.setParentElementID("publication");
viewer.show();
</script>
CSS
* {
margin: 0;
padding: 0;
border: none;
}
html, body {
height: 100%;
width: 100%;
overflow: hidden;
}
.tbl_con {
display: table;
width: 100%;
min-height: 100%;
*height: 100%;
}
.tbl_row {
display: table-row;
width: 100%;
min-height: 100%;
*height: 100%;
}
.tbl_cell {
display: table-cell;
min-height: 100%;
*height: 100%;
}
#banner {
width: 200px;
background-color: #1E90FF;
border-right: solid 3px #fff;
}
#publication {
width: *;
background-color: #FFAB1E;
}
This displays correctly in the latest version of IE and Chrome, but not in Firefox, where the 100% heights, or the actual magazine, do not appear at all. Any reason why?
Change *height to height and remove min-height.
Make sure you test in IE7, but it should work.
Is there a way to position an element relative to another element whithout the posibility of editing the html to make one element parent? This is my div order in html which i can't edit. I want "element3" to be positioned relative to "element1", to feet at the half height over "element1". I want my adsense block to be position relative to author position in that empty space on this site: http://www.musicep.com/2013/08/sunlounger-feat-alexandra-badoi-ill-be.html I've tried something like this:
#element1 {
width: 300px;
height: 200px;
background: yellow;
position: relative;
}
#element2 {
width: 300px;
height: 100px; }
#element3 {
width: 300px;
height: 100px;
background: red;
position: absolute;
top:-200px; }
U can use property "float" this way:
#element1 {
width: 300px;
height: 200px;
background: yellow;
float: left;
}
#element2 {
background: blue;
width: 300px;
height: 100px;
float: left;
}
#element3 {
width: 300px;
height: 100px;
background: red;
float: left;
}
If you really need it to actually become a child element, and cannot edit the html, you can move things around with jQuery:
$('#element1').append($('#element3'));
Though keep in mind that moving elements with javascript should usually be a last resort.