I have a modal dialog for a workflow that displays content roughly of a fixed height, but also displays an embedded PDF for a user to review.
I'd like to maximize the height of the PDF for the user's screen size, so the dialog scales vertically, but I can't get the PDF to fill all the remaining space within the dialog's div.
Here is the Html:
<div class="container">
<div class="popUp">
<div class="popUpHeader">Header</div>
<div class="fixedContent">Fixed Height Content</div>
<div class="resizeableContent">I should fill all the free vertical space in .popUp</div>
<div class="popUpFooter">Footer</div>
</div>
</div>
and CSS I'm using:
body, html {
margin: 0;
height: 100%;
}
.container {
height: 100%;
min-height: 100%;
background: #F8F8FF;
}
.popUp {
background: lightgrey;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 70%;
height: 90%;
}
.popUpHeader {
width: 100%;
background: darkgrey;
text-align: center;
}
.popUpFooter {
width:100%;
background:darkgrey;
text-align:center;
position: absolute;
bottom: 0;
}
.fixedContent {
height: 10em;
text-align: center;
background: #E1E1EE;
}
.resizeableContent {
background: #7d7f7c;
text-align: center;
width: 100% height: 100%;
}
JsFiddle: http://jsfiddle.net/trainman1124/pnbeoyb9/2/
Here is an image of the desired result:
Edit
Here is a sample JsFiddle using an embedded PDF, which is what actually needs to be done.
http://jsfiddle.net/trainman1124/pnbeoyb9/3/
Note, I've corrected the missing semicolon in the example and also added overflow:hidden
You could use the display: table; and display: table-row properties in order to fill the space.
Set the .container to fill 100% of the page and .popUp div to display: table; and fill it's parent.
Display all the children as display: table-row;, and then set heights for the popUpHeader and popUpFooter divs.
Allow your resizableContent div to fill the remaining space:
.resizeableContent {
background: #7d7f7c;
width: 100% height: 100%;
display: table-row;
}
Check out this CodePen
Modify Popup class to make its color same as resiseableContent
.popUp {
background: #7d7f7c; /* Modified here */
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 70%;
height: 90%;
overflow: hidden;
}
Depending on what browsers you need to support (This wont work earlier than IE9), one solution would be to use calc and vh units.
Something like:
.popUp {
background: lightgrey;
margin: auto;
height: calc(100vh - 10em); /* Height of viewport minus your .fixedContent div, you may also want to include the height of the header */
overflow: hidden;
}
The updated fiddle has the heights set to % instead. That works as you want I think?
Update
http://jsfiddle.net/batcave/pnbeoyb9/7/
.popUpFooter {
width:100%;
background:darkgrey;
text-align:center;
position: absolute;
bottom: 0;
height: 7%;
}
.resizeableContent {
background: #7d7f7c;
text-align: center;
width: 100%;
height: 80%;
}
.fixedContent {
height: 10%;
text-align: center;
background: #E1E1EE;
}
Related
I don't have much knowledge about html and css and I couldn't find the answer on the internet so I am here.
Problem:
I am trying to make an image fill top part of the screen but one thing stops me from it and it's the default margin of the <body>. I've managed it by using margin: -10px; But now the image can't fill the screen by 20px, probably because there is no margin, image still thinks screen is that big.
html,body {
width: 100%;
height: 100%;
margin: -10px;
padding: 0;
overflow: hidden;
}
img {
width: 1600px;
height: 300px;
opacity: 70%;
object-fit: cover;
object-position: top 10px;
}
.cont {
position: relative;
text-align: center;
padding: 10px;
}
.main-text {
font-size: 100px;
color: white;
position: absolute;
top: 100px;
left: 70px;
}
<body>
<div class="cont">
<img src="https://i.stack.imgur.com/DWZAk.jpg">
<div class="main-text">Big Ass Title</div>
</div>
</body>
NOTE: If you have any questions or didn't understand anything about the question, please ask because I am ready for any answer. :) Thanks.
If your image is meant to be a decoration(design), then background is fine to use.
.cont can be a flex or grid element, to avoid position absolute and possible unwanted sides effects.
here an example with a background and grid:
body {
margin: 0;
min-height: 100vh; /* optionnal if it does not have a purpose */
}
.cont {
height: 300px; /* guessed from your code */
display: grid; /* default make a single column*/
background: url(https://picsum.photos/id/1015/600/300) 0 0 / cover; /* background covering */
}
.main-text {
margin-block: auto; /* vertical-centering in its row from here */
margin-inline-start:70px;
font-size: 100px; /* from your code */
color: white; /* from your code */
font-weight: normal; /* you looked for this? */
text-shadow: 0 0 1px #000; /*Optionnal increase readability*/
}
<div class="cont">
<h1 class="main-text">Big Ass Title</h1><!-- if that's a title, then make it a title ;) -->
</div>
Generally to eliminate all the margins and paddings you can add:
* {
margin: 0;
padding: 0;
}
By the way I attached a snippet where it's working as you requested. Is better to eliminate the margins than adding a negative margin, if you want to do it that way you must to compensate it in the width to achieve the 100% width intended.
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
img {
width: 100%;
margin: 0;
height: 300px;
opacity: 70%;
object-fit: cover;
}
.cont {
position: relative;
text-align: center;
}
.main-text {
font-size: 100px;
color: white;
position: absolute;
top: 100px;
left: 70px;
}
<html>
<body>
<div class="cont">
<img src="https://images2.alphacoders.com/941/thumb-1920-941898.jpg">
<div class="main-text">Big Ass Title</div>
</div>
</body>
</html>
I am trying to understand the position in html and css by playing around with an example I have made up. In this example what I have created 3 divs which show color blocks. I am trying to make the first 2 blocks span the width of the screen and the third do just sit as it is on screen. I am trying to have all 3 blocks just stacked on top of each other.
in my html i have created 3 classes:
<div class="color-stripred">
</div>
<div class="color-stripblue">
</div>
<div class="color-stripgreen">
</div>
In my css i have defined the colors, shapes and positions of these blocks:
.color-stripred {
display: block;
height: 20px;
width: 100%;
background-color: red;
position: static;
top: 0;
left: 0;
}
.color-stripblue {
display: block;
height: 20px;
width: 100%;
background-color: blue;
left: 0;
}
.color-stripgreen {
display: block;
height: 20px;
width: 100%;
background-color: green;
left: 0;
}
The red block is on top followed by blue then green. It looks like the following picture:
The problem comes when I try and change the positioning in order to make red and box span the width of the screen. i change the red box css as follows:
.color-stripred {
display: block;
height: 20px;
width: 100%;
background-color: red;
position: fixed;
top: 0;
left: 0;
}
what happens is the redbox spans the width of the screen but the other two boxes shift upwards. how can i stop the blue box and the green box from shifting upwards?
The problem is caused by position: fixed; which you don't even need.
I think what you actually want is to set body { margin: 0; }.
According to W3Schools:
Most browsers will display the <body> element with the following
default values:
body {
display: block;
margin: 8px;
}
body:focus {
outline: none;
}
You can see in the snippet below, that if you add this to your CSS (i.e., remove the margin from the body), all three boxes become full viewport width (even though the width is set to 100%!).
See the snippet below.
body {
margin: 0;
}
.color-stripred {
display: block;
height: 20px;
width: 100%;
background-color: red;
top: 0;
left: 0;
}
.color-stripblue {
display: block;
height: 20px;
width: 100%;
background-color: blue;
left: 0;
}
.color-stripgreen {
display: block;
height: 20px;
width: 100%;
background-color: green;
left: 0;
}
<div class="color-stripred"></div>
<div class="color-stripblue"></div>
<div class="color-stripgreen"></div>
you could add margin-top:20px; to .color-stripblue
.color-stripred {
display: block;
height: 20px;
width: 100%;
background-color: red;
position: fixed;
top: 0;
left: 0;
}
.color-stripblue {
margin-top:20px;
display: block;
height: 20px;
width: 100%;
background-color: blue;
left: 0;
}
.color-stripgreen {
display: block;
height: 20px;
width: 100%;
background-color: green;
left: 0;
}
<div class="color-stripred">
</div>
<div class="color-stripblue">
</div>
<div class="color-stripgreen">
</div>
So i have .cont that's centered in using position absolute and is height 80% of body.
Inside it there are two divs. One is fixed height. And other one needs to expand to rest of parent, .cont.
So How do i make it expand to parent.
One other requirement is that content in both of these needs to be vertically and horizontally centered.
body
.cont
.top
.fillRest
Here is jsfiddle: http://jsfiddle.net/24jocwu5/
make .fillRest Expand to rest of .cont.
vertically and Horizontally center h1 headings in both divs.
Don't Use calc()
can use display table, flow, position, and other tricks.
Here you go. Absolutely position the white container with a top-padding that equals the height of your fixed-height top div. Then give the top div a z-index so it goes over your white box:
Fiddle - http://jsfiddle.net/24jocwu5/2/
* {margin: 0; padding: 0;}
html, body {
height: 100%;
background-color: #3dd;
color: #aaa;
font-family: helvetica;
}
.cont {
position: absolute;
top: 0; bottom: 0;
right: 0; left: 0;
background-color: #1af;
width: 400px;
margin: auto;
height: 80%;
}
.top {
height: 100px;
background-color: pink;
position: relative;
z-index: 1;
}
.fillRest {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding-top: 100px;
height: 100%;
background-color: #fff;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
h1 {
text-align: center;
width: 200px;
margin: auto;
background-color: #eee;
}
You can use flexbox for this
.cont {
display: flex;
flex-direction: column;
}
.cont > div {
display: flex;
}
.fillRest {
flex: 1;
}
Working Fiddle
This is what you want?
Only position fixed and right and left 0
http://jsfiddle.net/pabliiitoo/24jocwu5/1/
.fillRest {
position: fixed;
left: 0;
right: 0;
background-color: red;
min-height: 80px;
}
In order to expand the .fillRest to the rest of its parent .cont, you need to set it's height to a percentage. I estimate about 20~30% is what you want in order to maintain a similar look to the image you've provided here.
To test it, grab a very large paragraph full of letters and anything you want and put it where the 'Content' text is, that way you will be able to see it expanding in a responsive way. Another suggestion I will give you is to make your width percentages as well, so that they expand according to the width of the screen responsively.
Let me know if this helped you, otherwise I can take another look :)
CSS
.cont {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background-color: #1af;
width: 400px;
margin: auto;
height: 80%;
}
Personally, I think the way you're going about this is all wrong. But maybe something like this would work.
http://jsfiddle.net/24jocwu5/5/
CSS selectors I changed:
.cont {
position: absolute;
top: 0; bottom: 0;
right: 0; left: 0;
background-color: #1af;
width: 400px;
margin: 10% auto;
overflow: hidden;
}
.top {
height: 20%;
background-color: rgba(255,255,255,.8);
}
.fillRest {
background-color: white;
position: relative;
width: 100%;
height: 80%;
}
h1 {
text-align: center;
width: 100%;
margin: auto;
background-color: #eee;
}
This is Summary Of Ways.. First two ways posted here--
FlexBox Method 100% WORKS
Padding Method 80% WORKS. Useful But not exactly.
Css Table Cell and Table Rows 100% WORKS. From Me.
Using Calcs Simplest One. 100% WORKS. From me.
Css Table Cell: http://jsfiddle.net/24jocwu5/7/
.cont is The Table. top & fillRest are table rows, and there is cell which can have vertical align middle.
Calc Method: http://jsfiddle.net/24jocwu5/9/
Works but doesn't scale well if content increases, so need to use another div which can contain the content. Like so http://jsfiddle.net/24jocwu5/10/
Default code:
* {margin: 0; padding: 0; }
html, body {
height: 100%;
background-color: #3dd;
color: #aaa;
font-family: helvetica;
}
.cont {
position: absolute;
top: 0; bottom: 0;
right: 0; left: 0;
background-color: #1af;
width: 400px;
margin: auto;
height: 80%;
}
Let's consider one element #top. I want it's height to be 100% of the page, but diminished by 10em from the bottom. I'm unable to figure out how to do it. Please help.
HTML
<div id="top"></div>
<div id="bottom"></div>
CSS
html, body {
height: 100%;
padding: 0;
margin: 0;
font-size: 100%;
}
#top {
width: 100%;
height: 70%;
background-color: red;
}
#bottom {
position: absolute;
bottom: 0;
margin-left: 10%;
width: 100%;
height: 10em;
background-color: #000000;
}
See http://codepen.io/anon/pen/jEqYMK (for illustration, i have shown one more element, #bottom).
Your demo is lil weird but anyways, if you want to deduct 10em from 100% then use calc() property like
#top {
width: 100%; /* You won't need this */
height: calc(100% - 10em);
background-color: red;
}
Demo
Note : I've removed position: absolute;, margin-left like properties from your demo because I have no idea why you were using them at first place but if you want you can still use them.
I am building a site that works fine in both Chrome and Safari, but am having difficulties in Firefox. The applicable HTML in this issue is simple, is is just three divs inside of another div. The goal is to have one div positioned at the top of the parent div, one at the bottom, and one stretching across the remaining space:
<div class="outer">
<div class="top">
<p>some junk here</p>
</div>
<div class="middle">
<img src="<?php echo(htmlspecialchars($image_url)); ?>"/>
</div>
<div class="bottom">
<p>more junk</p>
</div>
</div>
Now, the css is as follows:
.outer {
position: relative;
display: inline-block;
text-align: center;
width: 600px;
height: 600px;
}
.middle {
background-size: 100%;
top: 62px;
bottom: 62px;
right: 0;
left: 0;
margin: 0;
padding: 0;
position: absolute;
}
.middle img {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
max-width: 95%;
max-height: 95%;
}
.top, .bottom {
width: 100%; /* THIS IS WHAT IS NOT WORKING */
height: 60px;
margin: 0;
padding: 0;
display: table;
position: absolute;
}
.top {
top: 0;
}
.bottom {
bottom: 0;
}
The issue is that the top and bottom divs are not extending to 100%. The are taking up as little space as necessary to fit their content. I have tried setting a max width on the divs, tried changing the display types, but nothing works. The kicker is, once I resize the window even the smallest amount, the top and bottom divs shoot to 100%. Strange. I am at a loss with this one so any help is greatly appreciated. Thanks.
.outer DIV cannot be display: inline-block for this scenario. inline-block means to adapt to the child widths. You need to either specify an exact width dimension, or use block display property.
.outer {
position: relative;
display: block; /* use BLOCK here instead of inline-block; */
text-align: center;
}
The reason why the top and bottom divs' widths were not working properly was because they were set to a display type of table. Removing just that line fixed the issue.
.top, .bottom {
width: 100%;
height: 60px;
margin: 0;
padding: 0;
/* REMOVE: display: table; */
position: absolute;
}