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
Related
I'd like to set the div height using percentages that do not depend on items in it.
I got a fixed header on the top of the screen and a centered div. But set height in percentages does not work. It enlarges only if I add some items in there.
Please help.
I have this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>lol</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="conteiner">
<header>
<p>header</p>
</header>
<div id="main">
<p>main info</p>
</div>
</div>
</body>
</html>
And this CSS.
html{
width: 100%;
height: 100%;
}
body{
overflow: hidden;
margin: 0;
width: 100%;
height: 100%;
}
header{
position: fixed;
top: 0px;
width: 100%;
height: 10%;
border: solid red 1px;
}
#main{
display: block;
width: 65%;
height: 80%;
border: solid green 1px;
margin: 8% auto 0 auto;
}
You forgot to make it's parent 100% height too.
#conteiner has automatic height by default because its div block. And default height is height of its children. If parent's height isn't set manually, children height in percents are ignoring by browser
#conteiner {
height: 100%;
}
at your style file you have to write style for container div code like
#container{
height:100%;
}
I want to create a header bar at the top of the web-page, give it a background color and then add a logo on it.
So the problem is:
The width of the bar should be the width of the page. Its height
should be the size of the logo (plus some padding added around the
logo image).
Or is there a way to make the bar as big as its
content plus the padding added to the content?
I actually searched SO and found this, I tried to reproduce it into my code but it does not seem to help me.
I have also seen this and this.
My code is as follows:
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.div {
position: absolute;
height: auto; //**** When changed to a percent value, it displays
width: 100%;
top: 0px;
left: 0px;
float: left;
background: #000029;
}
.logo {
position: fixed;
top: 5px;
left: 12px;
bottom: 4px;
}
</style>
</head>
<body>
<div class="div">
<img src="http://********Header.svg" alt="Logo" class="logo" >
</div>
</body>
</html>
It just does not display the background color at all, and when I change the value of height to some value in percent, it displays.
So what I want is that the height of the bar should fit to its content i.e. the logo image.
EDIT:-
Remove virtually all of your CSS rules and just use something as basic as:
.div {
background: #000029;
}
.logo {
vertical-align:top;
}
jsFiddle example
change you css code like below:
.div {
position: fixed;
width: 100%;
top: 0px;
left: 0px;
background: #000029;
padding:5px;
}
.logo {
}
see the demo here ---->http://jsfiddle.net/4A7Q9/1/
The style can be something along these lines:
<style>
.div {
width: 100%;
background: #000029;
padding-left:10px;
padding-right:10px;
padding-top:10px;
padding-bottom:10px;
}
.logo {
}
</style>
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.
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'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/