I'm tearing my hair out over this one, basically I'm making a page which has an absolute positioned output panel across the bottom of it, with the content in the top 80% of the window:
<div id="pageContent">
..Content..
</div>
<div id="outputPanel">
</div>
I've disabled the scroll bar on the body as I want two scroll bars, one on the page content, and one on the output.
body {
overflow: hidden;
}
#pageContent {
height: 100%;
overflow: auto;
}
#outputPanel{
height: 20%;
overflow: auto;
}
The output panel work, but the content doesn't, and here is why I think it doesn't; when I inspect the content div, it says it's 2600px in height (which is the height of the content it contains), but I set it to 100%, so shouldn't it be 100% of the height of the body? which should be 100% of the window?
When I explicitly set the height of the content to say 300px, it works as expected, but the thing is, I can't set the height as explicit pixel count because the window might resize..
How can I get the div to be 100% of the window, and is there any way to do it without using javascript, as I'm trying to do it in as pure html as possible.
What I think is both the divs are inside body tag so it should be 80% and 20% as per your requirement as div pagecontent and div outputpanel are say child div of body...or else do one thing
<body>
<div id="wrapper">
<div id="pageContent">
</div>
<div id="outputPanel">
</div>
</div>
</body>
Css goes Like this
body {
overflow: hidden;
}
#wrapper {
height: 100%;
overflow: scroll;
}
#pageContent {
height: 80%;
overflow: scroll;
}
#wrapper #outputPanel {
height: 20%;
overflow: scroll;
}
try this and tell me whether i got your question right...
I Think this is what you need xfx is right but you made a mistake in the question with double outputPanel
body {
overflow: hidden;
}
#pageContent {
height: 100%;
overflow: scroll;
}
#outputPanel{
height: 20%;
overflow: scroll;
}
body {
overflow: hidden;
}
#pageContent {
height: 100%;
overflow: scroll;
}
#outputPanel {
height: 20%;
overflow: scroll;
}
sorry miss-posted as a comment
OK I figured it out. The issue was that the div tag was picking up the size of the content, this is because height was set to 100%, so it got it from the body, which was 100%, which got it from the html, which wasn't set. Not sure why not setting it put it at that size, but explicitly setting the html tag's height to 100% sorted it.
Related
I'm trying to use a <img> tag to show a photo over another div, as some sort of overlay. However, the image won't scale to be inside of it's parent div (which is the body of the page). Instead it overflows the body. When I set overflow: hidden; to the body, you can't scroll over the page. I want the image to be full-height and fitted within the body (without enlarging the body).
This is basically the structure of the page:
<html>
<body>
<div class="imgContainer">
<img class="actualImage" />
</div>
<div class="restOfBody">
</div>
</body>
</html>
And the css:
body {
background-image: url(*some background photo*)
background-repeat: no-repeat;
background-size: cover;
width: 100%;
padding: 0;
margin: 0;
max-height: 100%;
}
.imgContainer {
z-index: 2;
position: absolute;
top: 0;
left: 0;
max-height: inherit;
}
.actualImage {
max-height: 100%;
}
This is basically what is happening now:
The image that is drawn over the text right now, pushes the page down so far, that it actually exceeds the body of the html.
height in % will not work till you will use meta for height,
ok please use overflow:hidden at the place of overflow:none
make your image as background-image. I think it would be better.
Add a container in your body as shown,
<body>
<div class="container">
<div class="imgContainer">
<img class="actualImage" src="banner.jpg">
</div>
</div>
</body>
and do this in css
.container {
width: 200px;/*sample width*/
height: 200px;/*sample height*/
overflow: hidden;
}
.imgContainer {
position: relative;
top: 0;
left: 0;
max-height: inherit;
}
The .container is responsible for setting a boundary and by using overflow: hidden, prevent content inside .container to overlap. While in the case of .imgContainer make sure the position is relative to container, absolute will pull itself out the flow, which is not safe in your case.
I have a very large table with a position:fixed header that stays at the top of the page when you scroll down the page.
I've been trying to enhance this by putting the table inside of a reasonably-sized width container with overflow:auto but the fixed container extends outside the div.
Here is a simplified JS fiddle
The problem with overflow stems from your position fixed property for the header element, furthermore the horizontal scroll on the container (unless intentional) should be fixed by adding the overflow-x: hidden property to your container element.
.container {
width: 400px;
height: 400px;
background: #ccc;
overflow-x: hidden;
}
.header {
width: 600px;
height: 100px;
background: #ddd;
}
.content {
width: 600px;
height: 600px;
background: #eee;
}
Let me know if this is not the answer you're looking for, we can discuss further.
I have a div inside my html body, and the div properties is declared this way in css:
#container {
width: auto;
height: inherit;
padding: 0;
overflow: hidden;
position: relative;
background-color: #FFFFFF;
}
I tried all height values and none worked as I wanted to. The problem is, I'm doing some query to display results inside this div. Sometimes I'll have just 1 result, another time 50. And here comes the problem. When I have only 1, the div goes up and shows the page background (behind the div) while I want it to be white and occupying the entire height even with 1 result only. Other times, when I get 50, the scrollbar of the page, do not get big enough to roll the entire div, and the informations get inside the bottom side of the div without the possibility to read them. If I get the height working for one case, it screw up the another. How to get both things working?
My html page where the div is:
<body id="home">
<div id="container">
<?php
if (isset($_GET['news']))
{
include 'news.php';
}
?>
</div>
</body>
The news.php is where I make the query to display the thing on the div.
Maybe what you need is:
#container {
width: auto;
min-height: 100%;
height: auto;
padding: 0;
overflow: hidden;
position: relative;
background-color: #FFFFFF;
}
the point is the overflow to scroll
#container {
width: auto;
height: inherit;
padding: 0;
overflow: scroll;
position: relative;
background-color: #FFFFFF;
}
You can always explicitly set the height of the html tag to 100% in the CSS and then set your container class to whatever percentage of the screen you would like it to fill. It should always be that percentage.
Hope this points you in the right direction.
use this:
html, body {
height: 100%;
}
#container {
height: 100%;
}
if you want your #container to always stick to the bottom of the page, then use this:
#container {
position: absolute;
bottom: 0;
}
Creating a fiddle could have helped.
I have a website on which I want to have 3 independently scrollable <div> elements.
The html code is this:
<div class="sidebar">Content</div>
<div id="window">Some very long content</div>
<div class="sidebar">More content</div>
The associated css is this:
body {
overflow: hidden;
}
#window {
font-family: monospace;
overflow: auto;
width: 70%;
float: left;
height: 100%;
}
.sidebar {
overflow: auto;
width: 15%;
float: left;
height: 100%;
}
From what I saw via searching the internet, this is supposed to work. But I don't see any scrollbars at all.
Why?
How can i fix this issue?
height: 100% as a percentage only affects the height of the element if that element's parent has an explicit height. The height of the body tag by default is the height of the content, not the full height of the window.
Try adding this:
html, body { height: 100%; }
Because of your height: 100%; your divs will just adjust to the height of the text. By changing your height to for example: 250px your code will work.
Hope this helps. :)
I have a simple HTML page with a sidebar floated to the left and all content to the right. In the main content area I have an <iframe>. However, when I use CSS to set the height of the frame to 100% it seems to overflow the containing div for some reason, resulting in a small amount of white-space after my content.
Here is my HTML content:
<div id="container">
<div id="sidebar">
<p>Sidebar content</p>
</div>
<div id="content">
<iframe id="contentFrame"></iframe>
</div>
</div>
And here is my CSS:
html, body {
height: 100%;
}
#container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
background-color: grey;
}
#sidebar {
width: 100px;
float: left;
background-color: blue;
height: 100%;
}
#content {
margin-left: 100px;
height: 100%;
background-color: yellow;
}
#contentFrame {
border: none;
padding: 0;
margin: 0;
background-color: pink;
height: 100%;
}
(NOTE: Before anybody asks, #container { position: absolute } is necessary for layout reasons; I can't change that.)
You can see it 'working' on this fiddle: http://jsfiddle.net/9q7yp/
The aim is to get rid of the white band along the bottom of the page (i.e. there shouldn't be a vertical scroll-bar in the result). If I set overflow: hidden for #content then the problem goes away. I'm happy to do this if necessary, but I can't for the life of me work out why it doesn't work without this. Can anyone tell me why?
Try to add
display:block;
to the iframe. http://jsfiddle.net/9q7yp/14/
Edit:
Well, it turns out there's a better solution (both in practice and in understanding what's going on):
Add
vertical-align:bottom;
to iframe#contentFrame. http://jsfiddle.net/9q7yp/17/
<iframe>, as an inline element, has the initial value of vertical-align:baseline, but a height:100% inline element will "push" the base line a few pixels lower (because initially the baseline is a few pixels higher from the bottom),
so the parent DIV is thinking "well content will be 2 pixels lower, I need to make room for that".
You can see this effect in this fiddle (check your browser console and pay attention to the bottom property of both ClientRect object).
Add margin:0 to body
html, body {
height: 100%;
margin:0 auto;
}
WORKING DEMO
Add margin: 0 to your html, body {} section.
...................demo
Hi now give to overflow:hidden; of this id #content
as like this
#content{
overflow:hidden;
}
Live demo