This is just an example code. I don't know how to limit the picture height and still have responsive #pictureContainer with object-fit: cover. Is there a more simple way to write this code. Any help would be appreciated.
html,
body {
padding: 0px;
margin: 0px;
}
#pictureContainer {
height: auto;
/*max-height: 100% <-- doesn't work */
position: relative;
}
.picture {
max-height: 100%;
width: 100%;
object-fit: cover;
}
<div id="pictureContainer">
<img class="picture" src="https://media.istockphoto.com/photos/brown-two-story-all-american-home-picture-id1158713117?k=20&m=1158713117&s=612x612&w=0&h=s_aoDM4KNoixI9qBLmJOBPMccoWsC11zxuBGGgFRiKY=">
</div>
Responsive images will automatically adjust to fit the size of the screen.
Add CSS:
If you want the image to scale both up and down on responsiveness, set the CSS width property to 100% and height to auto:
.responsive {
width: 100%;
height: auto;
}
for more information visit W3School
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.responsive {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<h2>Responsive Images</h2>
<img src="https://www.w3schools.com/howto/img_nature.jpg" alt="Nature" class="responsive" width="600" height="400">
</body>
</html>
Can't resolve this issue. In other browsers everything goes fine, but IE ignores max-height rule for wrapped images. The idea is that image should fit to the fixed full-sized container (.wrap), and image container (.container) should have the same size as image.
For example, i have such code:
<!Doctype html>
<html>
<head>
<title>Title</title>
<style>
.wrap {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.container {
max-width: 100%;
max-height: 100%;
}
.container img {
max-width: 100%;
max-height: 100%;
}
</style>
</head>
<body>
<div class="wrap">
<div class="container">
<img alt="Image" src="image_bigger_than_a_viewport.jpg">
</div>
<div>
</body>
</html>
Where source image should be bigger than a viewport size to let it scale down (you can just scale down browser window size).
Thank you.
UPD. Live demo: http://fiddle.jshell.net/egGQ7/show/
There are quite a lot of questions regarding iframe and it's height. Some are similar but not giving me the right answer. So let me explain my case:
JSFiddle: http://jsfiddle.net/AmVhK/3/show/
Editor: http://jsfiddle.net/AmVhK/3/
There is a table with 2 rows. First one contains a div #toolbar with fixed height. Second row contains a div which holds an iframe. I need the iframe to take the available space below the toolbar div.
Problem I am facing is in IE standards mode (supporting IE8+). Let's say, the height of the window is 1000px and height of toolbar is 200px, then the height of the iframe is also 1000px and so has scrollbars. I need the iframe to have height of (page height-toolbar height).
It would be good if there is a CSS solution. Using JavaScript to get the height available and setting it to the iframe or it's containing div is the last resort solution for me :)
Setting the toolbar or iframe to absolute position also won't work for my use case. Markup change is ok if necessary (if you want to remove tables)
I have already set the following CSS:
html, body {height: 100%}
Any good solution to implement it.
OK here's my attempt at this, there's an issue with the iframe wanting to have a horizontal scroll in IE7 but the layout is good, I had to give up because fighting with IE7 makes me want to chew out my own eyes, hopefully someone could expand from here.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>iframelayout</title>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
}
div, iframe {
margin: 0;
padding: 0;
border: 0;
}
.container {
position: relative;
width: 100%;
height: 100%;
background: #222;
}
.toolbar {
height: 200px;
background: #aaa;
}
.iframe-container {
position: absolute;
top: 200px;
bottom: 0;
width: 100%;
background: #555;
overflow-y: hidden;
}
.iframe-container iframe {
position: absolute;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="toolbar">
</div>
<div class="iframe-container">
<iframe src="https://c9.io/" frameborder="0">Your browser is kaput!</iframe>
</div>
</div>
</body>
</html>
Here is a solution tested in IE8 and FF17
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<style type="text/css">
*
{
border: 0;
line-height: 0;
margin: 0;
padding: 0;
}
html,
body
{
height: 100%;
}
#layout
{
position: relative;
width: 100%;
min-height: 100%;
overflow-y: hidden;
background-color: green;
}
#toolbar
{
width: 100%;
height: 200px;
background-color: blue;
}
#content-wrapper
{
position: absolute;
top: 200px;
bottom: 0px;
width: 100%;
background-color: red;
}
#content
{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="layout">
<div id="toolbar">
</div>
<div id="content-wrapper">
<iframe id="content" name="content" src="https://c9.io/" border="0"></iframe>
</div>
</div>
</body>
</html>
This is as clean as it can get minding your original question mentions the toolbar has a fixed height. Minimal code, no wrapper elements and no tables necessary, IE8+/Chrome/Fox compatible.
However, in the comments of Dale's solution, you mention the toolbar height being flexible instead and a requirement for the iframe to adjust - that is a major gamechanger and I would suggest you strip that of your requirements as it's practically impossible to achieve in CSS2 without extra JS and/or horrendous CSS hacks. If you didn't want IE<=9 compatibility, this would be very possible using CSS3 flexbox.
Since the reason for the toolbar flexible height would be animation for different states as you mentioned, I would suggest you use the code below and animate the toolbar height and iframe padding-top at the same time to achieve the desired flexibility instead of just the toolbar height. It does not require any extra JavaScript outside of the animation itself, so the only "disadvantage" is to animate 2 properties instead of 1. The rest of the layout will finely adjust.
<style type="text/css">
html, body {
height: 100%;
margin: 0;
}
#toolbar {
position: absolute;
width: 100%;
height: 200px; /* animate this */
}
#cblt_content {
display: block;
width: 100%;
height: 100%;
padding-top: 200px; /* and this */
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
border: 0;
}
</style>
<div id="toolbar">Toolbar</div>
<iframe id="cblt_content" src="https://c9.io/"></iframe>
Getting rid of the vertical scroll
Using this code should leave with only the inner (iframe) scrolls:
html, body
{
height: 100%;
width: 100%;
position: fixed;
}
Notes:
The width is needed (like with absolute).
You are right about absolute not helping you.
This actually makes sense for what you are trying to achieve (if I got it right).
Browser Support:
Might be a little buggy, but should be supported as of IE7 (quirksmode).
Hope I got the question right.
The solution is
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - Webduos Demo</title>
<style type="text/css">
*{ border: 0; line-height: 0; margin: 0; padding: 0; }
html, body { height: 100%; }
#layout { position: relative; width: 100%; min-height: 100%; overflow-y: hidden; background-color: green; }
#toolbar { width: 100%; height: 160px; background-color: blue; }
#content-wrapper { position:absolute; top:180px; bottom: 0px; width: 100%; background-color: #0000dd; }
#content {width: 100%; height: 100%; }
</style>
</head>
<body>
<div id="layout">
<div id="toolbar">
</div>
<div id="content-wrapper">
<iframe id="content" name="content" src="https://google.com/" border="0"></iframe>
</div>
</div>
</body>
</html>
I think you can simply hide the parent scroll bar and get what you want. Like by simply adding overflow-y hidden:
html, body {
height: 100%;
overflow-y:hidden;
}
This should do it! Here's the quick preview link: http://jsfiddle.net/AmVhK/15/show/
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#contentiframewrapper, #cblt_content {
/* max-height: 100%;
min-height: 99.9%;*/
height: 99.9%;
margin: 0;
padding: 0;
line-height: 0;
}
#toolbar {
height: 100px !important;
background-color: #CCC;
text-align: center;
font-size: 50px;
vertical-align: middle;
}
</style>
<table width="100%" height="99.6%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td valign="top" id="toolbar">Toolbar
</td>
</tr>
<tr>
<td width="100%" valign="top" height="80.5%">
<div align="center" id="contentiframewrapper">
<iframe width="100%" frameborder="0" name="cblt_content" id="cblt_content" src="https://c9.io/" border="0"></iframe>
</div>
</td>
</tr>
</tbody>
</table>
I've tested it in both Chrome and IE8 and it works on my side. It might bug in JSFiddle in IE8 but it shouldn't if you view it as a separate page (in normal conditions that is).
Edit:
Made some slight changes to the original code. However, you will have to change the <td> that holds the iFrame height value to the new height if you change the height of the toolbar. With IE there is no magic % value (unless you use JS, which you don't want of course) for it, it's just trial and error.
I know the answer to this is going to be simple, but I have a pretty simple HTML page, with 3 divs - header, map_canvas, and sidebar. I have some CSS to put all of this where it needs to go. But for some reason I am getting scrollbars in the browser window, and I don't want them there, I just want the page to fit the height and width of the window nicely. Any help is much appreciated.
My page is made up of this HTML:
<!doctype html>
<html>
<head>
<title>CSS Exercise</title>
<link rel="stylesheet" href="css/style.css" />
<script src="js/script.js"></script>
</head>
<body onload="initialize()">
<div class="header"></div>
<div id="map_canvas"></div>
<div class="sidebar">
<input id="lat" type="text" />
<input id="lng" type="text" />
</div>
</body>
</html>
And this CSS:
body {
height: 100%;
width: 100%;
}
html {
height: 100%;
}
.header {
width: 100%;
}
#logo {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 8px;
}
.sidebar {
float: right;
width: 20%;
height: 100%;
text-align: center;
}
#map_canvas {
float: left;
width: 80%;
height: 100%;
}
JSFiddle link
This will hide any overflow and prevent scrollbars from being displayed.
body {
overflow: hidden;
}
Add overflow:hidden, to your body CSS declaration
An easy way to solve this is to use overflow-x: hidden; inside your body tag.
I want to layer background images so I can get a nice effect with borders.
I think my code is simple enough, but the problem I am having is that the tags don't want to expand correctly. I'll explain more later. Here's the html:
<!doctype html>
<html>
<head>
<title>My blog</title>
<link rel="stylesheet" type="text/css" href="webdev.css"/>
</head>
<body class='body'>
<div class='outer'>
<div class='inner'>
</div>
</div>
</body>
</html>
The stylesheet:
.body
{
min-height:100%;
width:100%;
margin-top:0px;
overflow: hidden;
display: inline-block;
display: block;
}
.outer
{
min-height:100%;
width:100%;
overflow: hidden;
display: inline-block;
display: block;
}
.inner
{
min-height:100%;
width:100%;
}
I am not 100% sure the clearfixes are necessary yet. Basically I want the divs to all encapsulate the entire screen no matter what the screen size. Thanks for any and all responses. If I'm not clear feel free to comment and I will explain more, but I think the question is fairly basic.
Try this:
body
{
height:100%;
}
.outer
{
height:100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
display: block;
}
.inner
{
height:100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
display: block;
}
Making the width 100% is as simple as setting "width: 100%", the height is a bit harder..
You need to have "height: 100%" on both the <html> and <body>-tag.
And then "height: auto; height: 100%; min-height: 100%;" on your <div>'s
The reason that you have two "height" is because IE6 don't understand the "height: auto" and then needs the "height: 100%" instead.
You can see an example of this here: http://www.dave-woods.co.uk/wp-content/uploads/2008/01/full-height-updated.html