Using this question as a starting point I've changed things a little to match my purpose. Unfortunately I don't seem to be able to save this in jsfiddle as after saving the result always is "404 That page doesn't exist."
So here's the original code:
http://jsfiddle.net/JP3zW/
/* In a Reset CSS */
body, div {
margin: 0;
padding: 0;
}
/* Style CSS */
html, body { height: 100%; }
body {
position: relative;
background: #F4F4F4;
}
iframe#iframe {
width: calc(100% - 200px);
height: calc(100% - 100px);
overflow: hidden;
}
div#sidebar {
top: 0;
right: 0;
position: fixed !important;
height: 100%;
width: 200px;
background: gray;
}
div#bottombar {
bottom: 0;
height: 100px;
width: 100%;
background: black;
z-index: -1;
}
<iframe id="iframe" name="iframe1" frameborder="0" height="100%" width="100%" src="http://someurl.com"></iframe>
<div id="bars">
<div id="bottombar"></div>
<div id="sidebar"></div>
</div>
The result is, that the iframe somehow is displayed centered. However I'd like to have it aligned with the top left corner so that the left part of the embedded contents is visible.
I've tried align="left" and other in the HTML iframe definition but to no avail.
What do I need to do to have the contents of the iframe aligned top left?
As I see it, your iframe displays correct, but the sidebar is just overlapping the iframe because of the position: fixed.
I have changed a bit in the CSS, and used percentage instead of pixels, for it to be responsive.
Let me know if it works for you.
/* In a Reset CSS */
body,
div {
margin: 0;
padding: 0;
}
/* Style CSS */
html,
body {
height: 100%;
}
body {
position: relative;
background: #F4F4F4;
}
iframe#id_iframe {
width: 70%;
float:right;
height: 100%;
overflow: hidden;
}
div#id_sidebar {
float:left;
height: 100%;
width: 30%;
background: lightgray;
}
Related
I need to have the wrapper div element to be full height and so adjust its height depending on the whole height of the page so no scrollbars are displayed.
My html:
<header>
I am the header and my height is fixed to 40px.
</header>
<div id="wrapper">
I am the wrapper
</div>
My css:
html,body {
height: 100%;
background: blue;
margin: 0;
padding: 0;
}
header {
height: 40px; <-------- this value is fixed
background-color: green;
}
#wrapper {
height: 90%;
background-color: red;
}
I know the height: 90% on the wrapper is wrong but I don't know what to do.
Here is the jsFiddle: https://jsfiddle.net/3putthcv/1/
You can use CSS calc():
#wrapper {
height: calc(100% - 40px); /* 40px is the header value */
background-color: red;
}
JSFiddle
Or display:table/table-row:
html,
body {
height: 100%;
width: 100%;
background: blue;
margin: 0;
padding: 0;
}
body {
display: table;
width: 100%;
}
header {
display: table-row;
height: 40px;
background-color: green;
}
#wrapper {
display: table-row;
height: 100%;
background-color: red;
}
<header>I am the header and my height is fixed to 40px.</header>
<div id="wrapper">I am the wrapper</div>
JSFiddle
What about setting the size based on the top, left, right and bottom like this (demo) (full disclosure, it won't work if the content is too large):
#wrapper {
background-color: red;
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 40px;
}
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 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;
}
I'm trying to create something like this:
http://jsfiddle.net/S6FUQ/
HTML is:
<div id="container">
<header></header>
<main>
<section class="half"></section>
<section class="half"></section>
</main>
</div>
And CSS is:
* {
margin: 0; padding: 0;
}
html, body, #container {
height: 100%;
}
header {
height: 50px;
background: gray;
}
main {
height: 100%;
background: green;
}
.half {
height: 50%;
}
.half:first-child {
background: blue;
}
.half:last-child {
background: yellow;
}
In it, I have a thin ribbon at the top, and I want to divide the rest of the screen into two equal sections, but I don't want vertical scrollbar to appear.
I tried margin-bottom: 50px; for main, but it didn't work. What should I do?
Height of "main" should be 100% - 50px. Here is the fiddle.
main{height: calc(100% - 50px);}
To make it work on old browsers, you could use absolute positioning.
Demo
#container {
position: relative;
}
main {
position: absolute;
width: 100%;
top: 50px;
bottom: 0;
background: green;
}
You are already using % to set height... Why don't you use it again to solve your problem?
header {
height: 10%;
background: gray;
max-height:50px; //this will ensure your header will never go bigger than 50px
}
main {
height: 90%;
background: green;
}
PS: The only time your header is going to be smaller than 50px is when the browser is smaller than 500px (which will be only in some landscape mobile devices)
EXAMPLE
I'd like to have my header fixed: header is always at the top of page and my whole content (everything including footer) could be scrolled. Header is 60 px high as you can see below and it's not the problem to make it fixed at the top.
The problem I want to solve (using only CSS) is to have scrollbar starting below these 60 pixels from the top.
As you can see, the bottom of the scrollbar (2. arrow) is actually hidden/moved down. I guess by my problematic 60px.
So it goes like this:
HTML:
<!DOCTYPE html>
<head>
...
</head>
<body>
<header>
...
</header>
<div id="content">
...
</div>
</body>
</html>
CSS:
html, body {
height: 100%;
}
body {
background: #d0d0d0;
overflow-y: hidden;
}
header {
background: #fff;
height: 60px;
width: 100%;
position: fixed;
top: 0;
}
#content {
margin-top: 60px;
height: 100%;
width: 100%;
overflow-y: scroll;
}
What am I missing in my CSS?
Thanks guys.
// Edit as a reply to the forst answer here (to John Grey)
Commentary below your comment:
Here is a jsfiddle how to solve your problem:
http://jsfiddle.net/sTSFJ/2/
Here is the css:
html, body {
height: 100%;
margin: 0px;
padding: 0px;
}
#wrapper {
width: 100%;
height: 100%;
margin: auto;
position: relative;
}
#header {
height: 40px;
background-color: blue;
color: #fff;
}
#content {
position:absolute;
bottom:0px;
top: 40px;
width:100%;
overflow: scroll;
background-color: #fff;
color: #666;
}
Your #content height is equal body height, but you have a header so... Try use this:
html, body {
height: 100%;
}
body {
background: #d0d0d0;
overflow-y: hidden;
}
header {
background: #fff;
height: 5%;
width: 100%;
position: fixed;
top: 0;
}
#content {
margin-top: 5%;
height: 95%;
width: 100%;
overflow-y: scroll;
}
You can solve this using the calc property. That is instead of height 95%, since you don't know if 5% == 60px rather do the following:-
#content {
margin-top: 5%;
height: calc(100%-60px);
height: -webkit-calc(100%-60px); /*For webkit browsers eg safari*/
height: -moz-cal(100%-60px); /*for firefox*/
width: 100%;
overflow-y: scroll;
}