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/
Related
I have a modal that contains tabs that potentially will have long content.
What I'm trying to do is get the modal to resize on content height but when the content exceeds the modals max-height of 80% the content section should become scrollable.
currently, it works that content scrolls when it gets too large. but the problem is now the modal__content container stays 100% height regardless of the content. if I remove the height from modal__content then the content scroll no longer works.
Hope this makes sense
<div class="modal">
<div class="modal__container">
<div class="modal__content">
<div class="modal__left"></div>
<div class="modal__right>lorem 200 </div>
</div>
</div>
<div>
<div class="modal-overlay"></div>
CSS
html, body {
height: 100%;
}
*, ::after, ::before {
box-sizing: border-box;
}
.modal {
width: 100%;
height: 100%;
background: rgba(0,0,0,.7);
position: fixed;
left: 0;
top: 0;
}
.modal__container {
width: 1076px;
display: flex;
align-items: center;
height: calc(100% - 3.5rem);
margin:1.75rem auto;
}
.modal__content {
background: white;
display: flex;
height: 100%;
}
.modal__left {
width: 400px;
background: #f6f6f6;
}
.modal__right {
flex: 1;
display: flex;
align-items: center;
}
.modal__inner {
padding: 2.5rem;
}
.modal__body {
padding: 0 2.5rem;
height: calc(100% - 5rem);
overflow-y: scroll;
}
Try adding
overflow-y: scroll;
to .modal__content
You could also try switching the heights from
height: calc(100% - 3.5rem);
to
height: 100vh;
I need to set up a video width/height accordingly to its container.
Basically the video should have height 100% of its green container and the width should be variable.
plyr.setup();
body {
margin: 0;
}
.plyr {
height: 100%;
width :100%;
}
#wrapper{
display: flex;
justify-content:center;
width: 900px;
height: 500px;
background-color: green;
}
<script src="https://cdn.plyr.io/2.0.11/plyr.js"></script>
<div id="wrapper">
<div>
<div data-type="youtube" data-video-id="5p-Jdjo7sSQ"></div>
</div>
</div>
You can try this solution :
add other class for player's generated html.
plyr.setup();
body {
margin: 0;
}
.plyr {
height: 100%;
width :100%;
}
#wrapper{
display: flex;
justify-content:center;
width: 900px;
height: 500px;
background-color: green;
}
.plyr__video-wrapper {
height: 100%;
}
.plyr__video-wrapper iframe {
width: 100%;
height: 100%;
}
<script src="https://cdn.plyr.io/2.0.11/plyr.js"></script>
<div id="wrapper">
<div data-type="youtube" data-video-id="5p-Jdjo7sSQ"></div>
</div>
Then your height/width percents will actually perfectly work.
Under #wrapper, if you remove
display: flex;
Then your height/width percents will actually work. Then you can change the width to however you'd like in your JS.
Try this. Fiddle
body {
margin: 0;
}
.plyr {
height: 100%;
width :100%;
}
#wrapper{
display: flex;
justify-content:center;
width: 100%;
background-color: green;
}
.plyr__video-wrapper {
position: relative;
padding-bottom: 56.25%;
}
.plyr__video-wrapper iframe {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
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.
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/
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.