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. :)
Related
My container is not touching my footer for the majority of cases and I'm not sure what's going on.
So here is my CSS code:
html {
min-height: 100%;
position: relative;
}
body {
margin: 0;
width: 100%;
height: 100%;
}
section {
height: 100%;
}
#container {
overflow: auto;
width: 80%;
margin: 0 auto;
background: red;
height: 100%;
}
.footer {
width: 100%;
position: absolute;
left: 0;
bottom: 0;
}
Here's my HTML:
<body>
<div id="container">
<section>
<p>Content goes here</p>
</section>
</div>
<div class="footer">Content</div>
</body>
So I have all of the heights set for parent elements,but there's still a big gap between the container and the footer. In cases where the content takes up the whole page, the footer and container ends up touching, but the content for some reason gets lost in the footer. How can I solve this issue?
Height based on percentage are tricky. vh is much better for such purposes.
Here is the solution: JSfiddle
#container {
overflow: hidden;
width: 80%;
margin: 0 auto;
background: red;
height: 100vh;
}
Make one adjustment to your CSS:
Add height: 100% to the html element.
html {
height: 100%; /* NEW */
min-height: 100%;
position: relative;
}
This will clear the way for all child elements to recognize their percentage heights, and the container will expand. Your min-height: 100% will still work because min-height overrides height.
DEMO: http://jsfiddle.net/au6tcodc/
(You'll notice a vertical scrollbar on the container in the demo. This is caused by the overflow: auto declaration in #container. If you want to remove the scrollbar switch to overflow: hidden (see all overflow values).
This is my Three divs.
<div class="header">
<div>#ViewBag.Title</div>
</div>
<div class="content">
</div>
<div class="footer">
</div>
This is my CSS.
<style type="text/css">
html, body
{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.header
{
height: 10%;
width: 100%;
background-color: whitesmoke;
text-align: center;
}
.content
{
height: 80%;
width: 100%;
background-color: white;
}
.footer
{
height: 10%;
width: 100%;
background-color: whitesmoke;
}
</style>
Now I want that the child div inside my parent Header div will be flexible. Whenever i change my browser size the child div inside the parent header div will also get resized according to my browser size. And will stay inside the header div. Please help.
.header div
{
height: 100%;
width: 100%;
}
Use this for child div.
If set a child div's width is 50%. It filled in 50% of it's parent.
Do not set a height for the header element!
When dealing with responsive design, I try to avoid setting a height whenever possible. If you really need to set a height, do so on the child element, which then forces the header to have the height of its child.
use this in ur css
display-inline:block:
Here is the snippet:
#bar {
height: 30px;
width: 100%;
background-color: red;
}
#content {
width: 1000px;
}
<div style="width: 300px; height: 200px; overflow: auto;">
<div id="bar"></div>
<div id="content">1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
</div>
When I put 2 div ("bar", "content") inside a parent div and I set parent div to fixed width and height and overflow is auto to enable scroll bar. Then set "content"'s width larger than its' parent' width and "bar"'s width to 100%.
It turn out "bar"'s width will be same as its' parent, not its' sibling "content".
Thus when you scroll it, "bar" will scroll together instead of keep there...
Is any solution we can keep "bar" on the top or set it to 100% width as its' sibling "content" div?
Thank you!
Maybe you can wrap the content in a scroll wrapper, instead of the outer box.
See code below:
#parentBox {
width: 300px;
height: 200px;
border: 1px dashed grey;
}
#bar {
height: 30px;
width: 100%;
background-color: red;
}
#content {
width: 1000px;
}
.scrollWrapper {
width: 100%;
overflow: auto;
}
<div id="parentBox">
<div id="bar"></div>
<div class="scrollWrapper">
<div id="content">1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
</div>
</div>
Sure, using a little bit of hackery. Since this is a display-only div you might as well take it out of the document flow. As a bonus, this makes your HTML more semantically correct!
What we're doing is setting your content to have a width that's known to the browser (using the display:inline-block; property – Blocks have layout, inlines don't). Then, we create a pseudo :before element to show your header and let it fill the layout that we just gave to your content.
#content:before {
height: 30px;
content: '';
background-color: red;
display:block;
}
#content {
display: inline-block;
}
<div style="width: 300px; height: 200px; overflow: auto;">
<div id="content">1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
</div>
i'm working on a page in wordpress which shows 8 divs with some content.i want to show those all divs to 100% of window height in all devices and then when user click on the link next it shows another div one after another on clicking next, but somehow my divs are not going 100% in height.
Here is the css:
<style>
html {
height: 100%;
}
body {
line-height:25px;
margin: 0;
padding: 0;
height: 100%;
}
.content {
margin: auto;
min-height: 100%;
}
</style>
Here is the html:
<div class="container">
<div class="content" >
<----content goes here------>
<a href="#Initial" rel="m_PageScroll2id" >NEXT</a>
</div>
<div class="content" id="Initial" >
<----content goes here------>
<a href="#Initial" rel="m_PageScroll2id" >NEXT</a>
</div>
</div>
Here is the link for my dummy page:
http://enablersinvestment.com/backend/how-it-works-scroll/
You just need to set .content min-height to be 100vh as follows:
.content {
margin: auto;
min-height: 100vh;
}
checkout this demo: http://jsbin.com/xayaku/1/
You need to set the height of .container to 100% as well:
html {
height: 100%;
}
body {
line-height:25px;
margin: 0;
padding: 0;
height: 100%;
}
.container {
height: 100%;
}
.content {
margin: auto;
min-height: 100%;
}
Your problem here is that your content is inside the container and container does not have height: 100%.
Add the following rule to your css and you should be fine.
.container {
min-height: 100%;
}
If im correct The child adepts the percentage height to the height of the parent.
And in your case the child is content en the parent is container. You should give container a height of 100%.
.container {
min-height: 100%;
}
Do correct me if im wrong
To get divs to fill the whole webpage, you must add this line:
position: absolute;
For example:
div.content {
position: absolute;
height: 100%;
}
Without that line, the '100%' will be considered as the size of what is inside the div.
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.