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.
Related
I have checked the other similar question asked by CodersSC which did not help. It'd be very helpful if any of you can take a look at this.
I used object tag to load a php page inside my page. The problem is, when the div (which contains the contents of the other page) grows more than 100%, it is scroll-able instead of growing more than the given height.
the following is my html portion.
content.html
<div class='content'>
<p>...</p>
<hr class="gh" style="margin-left:0px; margin-top:3px;">
<object class="comm" data="comments.php?id=1"></object>
</div>
contentcss.css
.content {
background-color: #333;
margin: 2% auto;
padding: 22px 40px ;
width: 1200px;
height: auto;
}
.comm {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
i also tried the following in comm class inside my css:
.comm {
position: relative;
width: 100%;
min-height: 100%;
height: auto;
overflow: hidden;
}
^this makes the div smaller for some reason.
I'm not sure if this problem has been posted before, but I don't know how to ask this question effectively.
In my website I've created two large sections one after the other (not referring to the tag), one's height is set to 100% and the other is set to 90%. I've added a div directly underneath the second section. To keep the div stuck I've set "top" to 190% in order to simulate the length of the two sections. Although I've set a minimum height to each section, which makes the div crawl underneath the sections when they've stopped resizing.
How can I avoid this whilst using "position: absolute" for the elements?
html example (using one larger section):
<html>
<body>
<div class="section1"></div>
<div class="box"></div>
</body>
</html>
css example:
.section1 {
display: inline-block; width: 100%; height: 100%; min-height: 500px;
position: absolute;
}
.box {
width: 100%; height: 200px;
position: absolute; top: 100%; margin-top: 50px;
}
Thanks,
Jonathan
Just don't use position:absolute.
I'm assuming the reason you had it is because you needed height 100% of the viewport, without using JS. You could use the vh unit, but it doesn't have the best support/reliability.
The easiest way is to simply set html and body to height:100%;:
body,
html {
margin: 0;
height: 100%;
}
.full {
height: 100%;
background: teal;
}
.shorter {
height: 90%;
background: #fbfbfb;
}
footer {
background: #222021;
color: white;
text-align: center;
padding: 10px;
}
<section class="full"></section>
<section class="shorter"></section>
<footer>Made with love by a kitten</footer>
Note that I did add extra CSS for styling purposes.
Things i want achieve is quite simple
just at top a fixed position element that do not move while scrolling
down the document.
and after is a div#content have some margin-top from the top edge
and center in the window.
so the code is:
html
<div class='head-container' id="headerCom">
<header id="a"></header>
</div>
<div id="content" role="main"></div>
CSS
* {
margin: 0;
padding: 0
}
body {
width: 100%;
height: 100%;
position: relative;
}
.head-container {
position: fixed;
top:0;
left:0;
width: 100%;
height: 100px;
background: red;
_position:absolute; // make the ie6 support the fixed position
_top: expression(eval(document.documentElement.scrollTop)); // make the ie6 support the fixed position
}
header {
display: block;
width: 960px;
height: 100px;
margin: 0 auto;
position: relative;
zoom: 1;
background: blue;
}
#content {
border: 1px solid black;
margin: 130px auto 0 auto;
width: 960px;
height: 1000px;
background: #999;
margin-top: 150px;
}
all the modern browser is well support,but in ie(ie7,ie8,ie10) do not work correctly,things is just like it ignore the margin-top i set to the div#content;
so far i have checkout the other question on stackoverflow,and i try almost everthing i could.
when i change the margin-top of the div#content to the padding-top,things okay.
When i put a div.clear(clear:both)in between the div.header-container and the div#conetent,the things goes okay;
Or i follow other questions' solution that it caused by the hasLayout, and then take out the width and height of the div#content, the things is also okay, but in this way, i will need to put another div#inner-content inside the div#content, and set width and height to it to see the result.
so i am quite confused by the hasLayout, and i am not quite sure i am completely understand what it is and not quite sure what is happening in here in my code.
So actually can all you help me with this, is there any other solution could fix this problem, and explain this wired things to me?
Thank you anyway.
It works fine for me once I get rid of the last margin-top attribute. Do you know you have set it twice? Once with margin and them again with margin-top. If you edit just margins first value it wouldn't work because the last one will override the first one.
I am experiencing some strange behaviour when attempting the following (see jsfiddle: http://jsfiddle.net/9nS47/).
HTML:
<div id="slider">
<div id="wrapper">
<div id="navigation"></div>
<div id="container">
<div id="button"></div>
</div>
</div>
</div>
CSS:
HTML,BODY
{ width:100%; height:100%; }
* { margin: 0; padding: 0; }
#slider
{
position: fixed;
top: 0;
bottom: 0px;
left: 100px;
overflow-y: auto;
background-color: red;
}
#wrapper
{
position: relative;
height: 100%;
background-color: #000000;
min-height:400px;
}
#navigation
{
display: inline-block;
width: 80px;
height: 100%;
background-color: #0000FF;
}
#container
{
display: inline-block;
height: 100%;
background-color: #00FF00;
}
#button
{
width: 22px; height: 100%;
float:right;
background-color: #CCFFCC;
cursor:pointer;
}
What I am trying to do is making a left side navigation bar that spans the whole visible window height and only Shows a scrollbar if its height is smaller than for example 400px. The scrollbar for that div seems to be always visible due to some resizing problems (there is an extra pixel at the bottom I can't explain[color:red]).
Firefox also moves the second child element below the first when the scrollbar is visible because the scrollbar seems to be part of the content area and thus takes up to around 20px space. This does not happen if Overflow: Auto is replaced with Overflow: scroll however.
ATM changing the layout (specifically the Container with Position: fixed) is not an option.
Don't mind the space between the green and the blue box. Seems to be a whitespace problem.
Since it seems like you are unable to change your 'wrapper' code much, I tried to change your original code as little as possible. In fact, the only thing I did was to add some jQuery.
Check out this updated jsfiddle. I have included jQuery and the javascript I added was this:
$(window).bind("load resize", function(){
//this runs as soon as the page is 'ready'
if($(window).height() < 400){
$("#slider").css("overflow-y","scroll");
}else{
$("#slider").css("overflow-y","hidden");
}
});
Basically, 'onload' and 'onrezise', the jQuery figures out if you should show the scrollbars or not.
The reason that your "auto" isn't working is because of the "fixed" position of the slider element. The browser cannot perfectly figure out the heights.
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