I have the following site structure:
<body class="body>
<div class="main">
<div class="header" />
<div class="content" />
</div>
</body>
This is my css code:
.body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
overflow:hidden;
}
.main {
margin: 0 auto;
overflow: hidden;
width: 900px;
}
.header {
min-height: 60px;
padding: 30px 30px 0;
}
.content {
padding: 15px;
}
In my content div, I have a quite long text. The problem is, that the text is bigger than the visible area of the browser, but no scroll bar is shown, so it seems to me as if the content div is not being stretched in order to show all of its content.
How can I achiev the latter?
Remove overflow:hidden and add overflow:auto for the body class. Also missing close " in the body class.
.body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
overflow:auto;
}
DEMO
Related
This question already has answers here:
CSS: Width in percentage and Borders
(5 answers)
Closed 2 years ago.
This question is everywhere and the solution is always the same but it never works for me and I have no idea why! I simply need my div to fill the entire view port without creating a scroll bar. Who knew this would be so difficult. Everyone says to just set body and html margins to zero but this doesn't work. I still have a vertical scroll bar! I'm getting really frustrated and I would really appreciate some help. Here is the JSFiddle https://jsfiddle.net/davdarobis/d3k4hv6q/23/.
body, html {
height: 100%;
width: 100%;
position: absolute;
margin: 0;
}
#content
{
height: 100%;
border: solid blue 5px;
margin: 0;
}
#heading {
height: 40%;
border: solid red 5px;
}
img {
height: 100%;
}
<body>
<div id="content">
<div id="heading">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png" alt="" class="image">
</div>
</div>
</body>
I can't use the top: 0 bottom: 0 solution because this seems to screw up the height: 100% property of its children. I'm completely stuck. Any ideas? Thanks.
Apply the property box-sizing: border-box; to all of your elements (selector *) so the extra space caused by borders, padding, and margins is then included in the 100% and not added to the 100% (i.e. 100% + 5px border).
* {
box-sizing: border-box;
}
body, html {
height: 100%;
width: 100%;
position: absolute;
margin: 0;
}
#content
{
height: 100%;
border: solid blue 5px;
margin: 0;
}
#heading {
height: 40%;
border: solid red 5px;
}
img {
height: 100%;
}
<body>
<div id="content">
<div id="heading">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png" alt="" class="image">
</div>
</div>
</body>
the border: solid blue 5px; is causing the scroll bar to appear.
It ends up having 10px more height than the parent element "body" (5px bottom +5px
top).
if you really need a border, you subtract it from the 100%.
Try to add to html tag an overflow property like so:
body, html {
height: 100%;
width: 100%;
position: absolute;
margin: 0;
overflow-y: hidden;
}
Try to use 100vh in place of 100% for height and also set box-sizing:border-box; for all elements, I have made some changes to the css, please check if it works
*{
box-sizing:border-box;
}
body, html {
height: 100vh;
width: 100%;
margin: 0;
overflow:hidden;
}
#content
{
height: 100vh;
border: solid blue 5px;
margin: 0;
}
#heading {
height: 40%;
border: solid red 5px;
}
img {
height: 100%;
}
Hope it works.
Add this line on top of your css, that should prevent scrolling
* {
box-sizing: border-box;
}
I got a little problem when i want to put an overflow: scroll on an element. That element is going outside his parent and i want to just make it scroll.
I remade the problem on codepen so you can check it.
I would like to keep the entire page to not scroll. Just the element i want would be able to be scrolled.
Sorry for my english.
* {
border: 1px solid black;
}
html {
height: 100vh;
margin: 0;
padding: 5px;
}
body {
height: 100%;
margin: 0;
}
img {
width: 150px;
display: block;
margin: auto;
margin-top: 50px;
}
.website {
width: 960px;
margin: auto;
}
input {
width: 100%;
}
.yes {
height: 150px;
}
.container_scroll {
overflow: scroll; /* not working*/
}
<img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5f4bd7a6-f763-4518-9b81-bdfd40ce3fc9/d26yer1-421bb5b8-9fc2-4d5a-b2d1-1e1f81b26b82.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzVmNGJkN2E2LWY3NjMtNDUxOC05YjgxLWJkZmQ0MGNlM2ZjOVwvZDI2eWVyMS00MjFiYjViOC05ZmMyLTRkNWEtYjJkMS0xZTFmODFiMjZiODIucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.p5vfqGmq9kIylfG3glHGa20CAPUtoWlAxKEGpIvGOi8">
<div class="website">
<section>
<h2>title</h2>
<input type="text" placeholder="my_text">
<div class="container_scroll">
<div class="yes"></div>
<div class="yes"></div>
<div class="yes"></div>
</div>
</section>
</div>
Assuming you're trying to scroll on the y-axis (up and down, not left to right), it's not scrolling because you don't have a height set on the parent. You only have height set on the children for a total of 150px a piece, or 450px overall. Also - if you want to make sure you ONLY scroll up and down, you'll want to specify that you want to only scroll on that axis, and not the other - as seen below.
If you tried changing the overflow property to auto instead of scroll (a good way to check if it will have any overflow because scrollbars ONLY appear if needed) - you see that a scrollbar doesn't appear - so there is no overflow currently.
If you want to have a scroll, you'll need to set the height to less than the overall height of the children (450px).
* {
border: 1px solid black;
}
html {
height: 100vh;
margin: 0;
padding: 5px;
}
body {
height: 100%;
margin: 0;
}
img {
width: 150px;
display: block;
margin: auto;
margin-top: 50px;
}
.website {
width: 960px;
margin: auto;
}
input {
width: 100%;
}
.yes {
height: 150px;
}
.container_scroll {
overflow-x: hidden; /* Hide horizontal scrollbar */
overflow-y: scroll; /* Add vertical scrollbar */
height: 300px;
}
<img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5f4bd7a6-f763-4518-9b81-bdfd40ce3fc9/d26yer1-421bb5b8-9fc2-4d5a-b2d1-1e1f81b26b82.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzVmNGJkN2E2LWY3NjMtNDUxOC05YjgxLWJkZmQ0MGNlM2ZjOVwvZDI2eWVyMS00MjFiYjViOC05ZmMyLTRkNWEtYjJkMS0xZTFmODFiMjZiODIucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.p5vfqGmq9kIylfG3glHGa20CAPUtoWlAxKEGpIvGOi8">
<div class="website">
<section>
<h2>title</h2>
<input type="text" placeholder="my_text">
<div class="container_scroll">
<div class="yes"></div>
<div class="yes"></div>
<div class="yes"></div>
</div>
</section>
</div>
I have this page layout and am trying to make it occupy 100% of the height by expanding the content area and leaving the footer visible at the bottom of the page.
But for some reason the content area is not expanding. Do you know what I need to change in the code?
<body>
<form id="form1" runat="server">
<div>
<div class="main">
<div class="header">
This is the header
</div>
<div class="content">
This is the content
</div>
<div class="footer">
This is the footer
</div>
</div>
</div>
</form>
</body>
And here is the css
html, form
{
height: 100%;
}
body
{
padding: 0px;
margin: 0px;
background-image: url('../back.jpg');
height: 100%;
}
.main
{
margin: 0px auto;
width: 100%;
height: 100%;
}
.header
{
float: left;
width: 100%;
background-color: Yellow;
height: 80px;
}
.content
{
width: 960px;
margin: 0 auto;
background-color: Gray;
height: auto;
min-height: 100%;
}
.footer
{
width: 960px;
background-color: Green;
margin: 0px auto;
height: 50px;
}
Thanks
You need to remove the extra div that has no class specified. Since that div has no height specified, the 100% height you are setting in the div with class main will not work.
<body>
<form id="form1" runat="server">
<div class="main">
<div class="header">
This is the header
</div>
<div class="content">
This is the content
</div>
<div class="footer">
This is the footer
</div>
</div>
</form>
</body>
UPDATE
Okay so fixing your issue with the footer not "sticking" to the bottom of the page, I modified part of your css.
.content
{
width: 960px;
margin: 0 auto;
background-color: Gray;
padding-bottom: 50px;
min-height: 90%;
}
.footer
{
position: fixed;
bottom: 0;
left: 50%;
width: 960px;
margin-left: -480px;
height: 50px;
background-color: Green;
}
.content
padding-bottom: 50px; This is so extra content does not overflow into the space occupied by the footer.
.footer
position: fixed; We need this to force the positioning of the footer.
bottom: 0; This will force the footer to the bottom of the page.
left: 50%; Puts the left side of the footer div in the middle of the page.
margin-left: -480px; Move the div left of half of the width of the footer so it is now centered on the page.
Example 1: http://jsfiddle.net/nG9sm/
Example 2, lots of text: http://jsfiddle.net/9Up5F/
Your code has extra div with no class just remove it, it will fix the issue.
Updated fiddle
Update your .footer CSS:
.footer
{
width: 960px;
background-color: Green;
margin: 0px auto;
height: 50px;
position: absolute;
bottom: 0;
}
or
.footer
{
width: 960px;
background-color: Green;
margin: 0px auto;
height: 50px;
position: fixed;
bottom: 0;
}
Help Link
Make footer stick to bottom of page correctly
First off, similar but never answered questions:
vertically-scrolling-percentage-based-heights-vertical-margins-codepen-exampl
scroll-bar-on-div-with-overflowauto-and-percentage-height
I have an issue with scrolling a center part of the web page while its height needs to be auto.
Here is a fiddle
The header needs to be on top at all times, meaning I don't want the body to become larger than 100%.
However the div #messages can become larger, and that div needs to scroll on its own.
The #messages has a margin-bottom to leave room for the fixed bottom div.
I tried making the div #messages with box-sizing: border-box; and making it height:100% and padding to keep it in place but this was a really nasty looking solution and the scroll bar was the full page height instead of only the inner part.
Any help would be greatly appreciated.
You want something like This
Or maybe - his big brother..
Pure CSS solution, without fixing any height.
HTML:
<div class="Container">
<div class="First">
</div>
<div class="Second">
<div class="Content">
</div>
</div>
</div>
CSS:
*
{
margin: 0;
padding: 0;
}
html, body, .Container
{
height: 100%;
}
.Container:before
{
content: '';
height: 100%;
float: left;
}
.First
{
/*for demonstration only*/
background-color: #bf5b5b;
}
.Second
{
position: relative;
z-index: 1;
/*for demonstration only*/
background-color: #6ea364;
}
.Second:after
{
content: '';
clear: both;
display: block;
}
.Content
{
position: absolute;
width: 100%;
height: 100%;
overflow: auto;
}
You could try the following.
You HTML is:
<div id="container">
<div id="header">The header...</div>
<div id="content">
<div id="messages">
<div class="message">example</div>
...
<div class="message">example</div>
</div>
<div id="input">
<div class="spacer">
<input type="text" />
</div>
</div>
</div>
</div>
Apply the following CSS:
html, body {
height: 100%;
}
body {
margin:0;
}
#header {
background:#333;
height: 50px;
position: fixed;
top: 0;
width: 100%;
}
#content {
position: absolute;
top: 50px;
left: 0;
right: 0;
bottom: 45px;
overflow-y: scroll;
}
#messages {
overflow: auto;
}
#messages .message {
height: 79px;
background: #999;
border-bottom: 1px solid #000;
}
#input {
position:fixed;
bottom:0;
left:0;
width:100%;
height: 45px;
}
#input .spacer {
padding: 5px;
}
#input input {
width: 100%;
height: 33px;
font-size: 20px;
line-height: 33px;
border: 1px solid #333;
text-indent: 5px;
color: #222;
margin: 0;
padding: 0;
}
See demo at: http://jsfiddle.net/audetwebdesign/5Y8gq/
First, set the height of 100% to the html and body tags, which allows you to reference the view port height.
You want the #header to be fixed towards the top of the page using position: fixed, similarly for your footer #input.
The key is to use absolute positioning on #content to stretch it between the bottom edge of the header and the top edge of the footer, and then apply overflow-y: scroll to allow it to scroll the content (list of messages).
Comment
The source code for the #input block may be placed outside of the #content block.
I'm having issues with my divs. I'm trying to make a content parent dive that will stretch as posts are placed in it(wordpress theme) without the child div pertrudeing from the bottom. I found that the key to this is to make the parent div absolute, but this creates another problem for me. The thing is that I also want a relatively posititioned footer that moves as the content div stretches. So what I am trying to has is how can I have a "stretchy" content div and a relatively positioned footer simultaneously? Here's my css:
body{height: 100%;
margin: 0;
padding: 0;
}
#wrapper{width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
}
#content{height: 35em;
width: 30em:
position: absolute;
padding: .62em;
margin: 5em;
}
.post{width: 12em;
height: 12em;
margin: 1em;
float: left;
}
#footer{position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
margin: 1em 0 0;
}
Like i said, I already tried relative positioning, but that didn't work to my liking. I also tried the "sticky footer" method, which works fine on a large resolution screen, but displays either in front or behind the content div(depending on the z-index) on smaller res screens. Also, if it is posible, I would prefer to not utilize JS. Any help is much appreciated!
enter code here
Set overflow to auto in content,
Change height to min-height in content,
Have absolute elements wrapped in a relative div for happiness.
Here is a jsfiddle showing it: http://jsfiddle.net/mAhet/
HTML
<html>
<body>
<div id="wrapper">
<div id="content">
<div style="position:relative; width:100%; height:100%;">
<div class="post">lasa sf </div>
<div class="post"> asd asd as</div>
<div class="post"> asd a dsadda das</div>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
CSS
body{height: 100%;
margin: 0;
padding: 0;
}
#wrapper{width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
position:relative;
}
#content{
min-height: 35em;
width: 30em:
position: absolute;
padding: .62em;
margin: 5em;
overflow:auto;
}
.post{width: 12em;
height: 12em;
margin: 1em;
float: left;
}
#footer{position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
margin: 1em 0 0;
}
Here is a jsfiddle showing it in action: http://jsfiddle.net/mAhet/