Div to fit page and expand/scroll

Question

I have a page which I set a div where all the content will be placed. I had the div working as I wanted it, but when I went onto my admin page which displays all the records, I noticed I couldn't scroll down to see the rest.

I managed to fix this so I could scroll downwards if the content when further down the page. However, pages which require to scroll down have a scrollbar on the right side of the div instead of the actual page (far right). I'v used overflow-y:hidden to remove the scrollbar, but I'm then unable to scroll down.

I'm curious to see if anyone has any suggestions in order to remove the scrollbar from the div and only have the standard scrollbar show when needed. This is the current code:

Current

HTML

<html class="no-js" lang="en">
 <head>
  <title>Home</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <link rel="stylesheet" href="css/Base.css"/>
 </head>

 <body>
  <div class="wrapper">
    <p> Duplicate text to test </p>
  </div>
 </body>
</html>

CSS

*
  {
   margin: 0;
   padding: 0;
  }

html
  {
   height: 100%;
  }

body 
  {
   background-image:url('../images/background.png');
   font-family:             Arial; 
   color:                   #000000;
   font-size:               14px;
   height:                  100%;
  }

.wrapper 
 {
  width: 62.5%; 
  height: 100%;
  overflow:auto;
  background: #fffac8;
  margin: 0 auto;
  box-shadow: 0px 0px 10px 0px #000000; 
 }

If overflow:auto is removed from the div, I can scroll down like any normal page, but then the div is cut to the standard page.

Overflow removed from div (Want it like this but with the div still stretching when needed)

take a look at this question : http://stackoverflow.com/questions/16670931/hide-scroll-bar-but-still-being-able-to-scroll — Adjit, Apr 11 '14 at 16:13
use a different CSS file for admin , or add some style to overwrite your overflow rule back to normal — G-Cyrillus, Apr 11 '14 at 16:13

score 1 · Accepted Answer · answered Apr 11 '14 at 20:25

1

In the .wrapper CSS rule, try using min-height instead of height.

 .wrapper 
 {
  width: 62.5%; 
  min-height: 100%;
  overflow:auto;
  background: #fffac8;
  margin: 0 auto;
  box-shadow: 0px 0px 10px 0px #000000; 
 }

answered Apr 11 '14 at 20:25

Sam

221
3
8

Thank you very much! Exactly what I wanted :) – jcsix Apr 12 '14 at 12:49

score 0 · Answer 2 · answered Apr 12 '14 at 08:43

Remove height: 100%; from wrapper div. It is by defult height: auto; By giving them height: 100% you are forcing .wrapper to follow the height of its parent. And as you know if it become overflown then it'll automatically take scroll. So don't keep that, its not necessary. I hope it works in your case.

Div to fit page and expand/scroll

2 Answers2