Please have a look at this jsfiddle
<!DOCTYPE html>
<html lang='en'>
<head>
<style>
body { height: 100%; margin: 0; padding: 0;}
div { height: 100%; width: 100%; position: absolute; top: 0px; left: 0px; background: black;}
img { height: 100%;}
</style>
</head>
<body>
<div><img src='https://upload.wikimedia.org/wikipedia/commons/8/85/Smiley.svg'></div>
</body>
</html>
Even setting height 100% for both and , there still has little extra space in the bottom that causes the scrollbar. Does anyone know what causes that space?
I just want to know the behavior.
Thank you!
The img tag is an inline tag and the extra space you're seeing is due to this. Add display:block to the style of the image.
Related
So I am not a web developer and have very little experience with html and css so this might sound dumb:
But I saw code from my co worker who set a section to position:relative and the child element (an h1 in this case) to position: absolute; top: 0; left: 0; height: 100%; width:100% and somehow the h1 took the entire height and width of the parent which was the section.
I tried reproducing it below but it was not possible. Seems like the h1 has a height of zero since the border is not surrounding it. Is there something wrong with the code below?
<!DOCTYPE html>
<html>
<head>
<style>
.main {
background-color: blue;
position: relative;
}
h1 {
position: absolute;
top: 0;
left: 0;
border: 1px solid black;
height: 100%;
width: 100%;
}
</style>
<title>Page Title</title>
</head>
<body>
<section class="main">
<h1>This is a Heading</h1>
</section>
</body>
</html>
It is not the position: relative that is causing the problem but the position: absolute set on the h1.
If the parent container having the absolutely positioned child element doesn't have an explicit width and height set, it will collapse. This is because absolutely positioned elements are taken out of the normal flow of the document.
In order to solve your problem, you can explicitly set height/width on your .main.
Please remove position:absolute; top:0; left:0;height:0;width: 100%; this css to h1 class and your problem is solved.
<!DOCTYPE html>
<html>
<head>
<style>
.main {
background-color: blue;
position: relative;
}
h1 {
border: 1px solid black;
}
</style>
<title>Page Title</title>
</head>
<body>
<section class="main">
<h1>This is a Heading</h1>
</section>
</body>
</html>
I don't know how else to describe it, not fullscreen, but fill up the whole viewport.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1001001</title>
<style id="style-tag"></style>
<script src="dist/app.js"></script>
</head>
<body spellcheck="false">
<div id="content">
<pre contenteditable id="style-text"></pre>
</div>
<div id="footer">
Skip
</div>
</body>
</html>
CSS:
html, body {
margin: 0;
height: 100%;
overflow: hidden;
}
pre {
overflow: auto;
min-height: 100%;
width: 100%;
border-radius: 1px; /* Prevents bad clipping in Chrome. */
}
#content {
position: absolute;
top: 0; right: 0; left: 0; bottom: 20px;
}
#footer {
position: absolute;
bottom: 0;
height: 20px;
left: 0;
right: 0;
padding: 0 10px;
}
Expected outcome:
The coloured block fills the entire screen (I require this to be a as text is added afterwards).
Actual outcome:
Viewport is almost covered by the block, however, on the top and bottom, there is about 10px that are not coloured.
If you set the css min-height property as min-height:100vh; (rather than 100%) on the <pre> element, that should solve your issue, by forcing the height of the element to at least the full viewport height.
Edit - also add margin:0; to the style of the <pre> element. That seems to work for me.
Hope this helps! - James.
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 have the following code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style type="text/css">
body {margin: 0; padding: 0}
.left {
background-color: yellow;
width: 200px;
height: 100%;
position: fixed;
}
.right {
background: green;
height: 3000px;
left: 200px;
right: 0px;
position: absolute;
}
</style>
</head>
<body>
<div class="left">d</div>
<div class="right">dafsdsfsdafkdasfjdslkfja;jdfsklsfdjaklfjdkafsjklsdjkfajklfdaksjlfjlsdsfjasdfkjldsa;fksdalfjdsafjdksa;lfjsdlfjaslfdjsafhdasjfhdsakjfhdsakjfjkadsflasfdfadfasfdasfdsfasfdasfdsaadfkljdsalfsafdsafdsaf</div>
</body>
Which renders the following result. How should I resize the right div to fill the entire screen minus the width of the left div, which is 200px? Currently it overflows the screen width, and I do not know why!
Thanks in advance.
your text in div.right is too long. So you can use
word-wrap: break-word;
also
right: 200px;
see in jsfiddle
the problem is that you enter a nonspaced string so navigator dosn´t know how to display it in multi line you can add the css word-wrap: break-word; to solve this.
this is your example modified:
http://jsfiddle.net/q4kwy/3/
I found an elegant solution, and it can be found here
I'm trying to make a really simple webpage. It should be a 1000px wide green, centered rectangle stretching all the way from the top to the bottom of the webpage on a red background, no matter how much content there is.
I can't get this working though. If I use min-height (like below), the green area doesn't stretch all the way to the bottom of the page if there's not enough content. If I replace it by height, the content overflows the green area if there's much content.
Here's my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="stylesheet.css" />
</head>
<body>
<div id="container">
content here.
</div>
</body>
</html>
Here's the CSS:
html {
height: 100%;
}
body {
background-color: #F00;
margin: 0;
min-height: 100%;
}
#container {
background-color: #0F0;
width: 1000px;
margin: 0 auto;
height: 100%;
}
I know this is feasible with more divs, but it really should work without changing the HTML. How can I solve this?
By the way, I'm on Safari. I don't care about compatibility with browsers not respecting standards.
Here is a working sample:
<!doctype html>
<html>
<head>
<title>Container sample</title>
<style>
html, body
{
margin: 0;
padding: 0;
height: 100%;
background: red;
}
#container
{
background: green;
width: 1000px;
min-height: 100%;
margin: 0 auto 0 auto;
}
</style>
</head>
<body>
<div id="container">
Container sample
</div>
</body>
</html>
For more information take a look at my answer to a similar question.
you can use property position absolute for your requirement. It may help you
#container {
background-color: #0F0;
width: 1000px;
margin: 0 auto;
position:absolute;
top:0;
bottom:0;
left:50%;
margin-left:-500px;
}
Give your #container a position:absolute; with top and bottom set to 0.
#container {
background-color: #0F0;
width: 1000px;
margin: 0 auto;
position:absolute;
top:0;
bottom:0;
}
http://jsfiddle.net/jasongennaro/4ZLcD/