Kamaradski Kamaradski - 3 months ago 10
CSS Question

Website goes off-screen in height

I am building this website and created a nice layout for what I need. However on a smaller (laptop) screens the content is higher than the screen, and it does not allow one to scroll up and down. Instead it keeps showing the exact center of my content.

How would I add a scroll-bar to the entire page, so people are not fixed to the center of the page only ?

My current css:

<style>
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

#maincanvas{
position:fixed;
top: 50%;
left: 50%;
width:700px;
height:800px;
/* background: background="static/bg02.png";*/
/*border: 15px solid #cc0000;*/
padding: 25px;
transform: translate(-50%, -50%);
}
#logobox{
position:absolute;
top: 0px;
left: 50px;
width:600px;
height:50px;
/*border: 10px solid #cc0000;*/
padding: 25px;
}

#contentbox{
position:absolute;
top: 200px;
left: 50px;
width:600px;
height:400px;
background: #f5f5dc;
border: 10px solid #cc0000;
padding: 25px;
}

#footerbox{
position:absolute;
bottom: 10px;
left: 50px;
width:600px;
height:30px;
background: #f5f5dc;
border: 10px solid #cc0000;
padding: 25px;
}
#footerlogo{
overflow:hidden;
position:fixed;
bottom: 30px;
right: 5px;
background: #f5f5dc;
border: 10px solid #cc0000;
overflow: hide;
width:250px;
height:30px;
padding: 25px;
}
/*input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 3px solid #ccc;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
}*/

input[type=text]:focus {
border: 3px solid #555;
}

.widthSet {
max-width: 150px;
position:fixed;
bottom: 35px;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
</style>


The site content:

<body background="static/bg.png">
<div id="maincanvas">
<div id="logobox">
</div>
<div id="contentbox">
$:content
</div>
<div id="footerbox">
</div>
</div>
</body>


I have tried playing with different overflow settings, however so far, didn't manage the result I am after. With overflow I can only scroll the content of the boxes, however what I need is to scroll the site (canvas?)

Hoping this is not a duplicate, as I did search, but maybe lack the exact keyword to search for.

Answer

The issue you're running into is the use of position: fixed;.

From MDN regaurding fixed positioning.

Fixed Positioning: Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it when scrolled.

So adding scroll to an overflow property won't do anything. The element with fixed positioning isn't taking up any space and will always be positioned relative to the viewport in some way.

What you want is position: absolute; and a modification to your top attribute for smaller screens.


#maincanvas {
  /* Note: we could use margin: 0 auto; to center but on larger screens we need left and top set to center inside viewport */
  position: absolute;
  left: 50%;
  width: 700px;
  height: 800px;
  padding: 25px;
  transform: translateX(-50% );
}
#logobox {
  position: absolute;
  top: 0px;
  left: 50px;
  width: 600px;
  height: 50px;
  border: 10px solid #cc0000;
  padding: 25px;
}
#contentbox {
  position: absolute;
  top: 200px;
  left: 50px;
  width: 600px;
  height: 400px;
  background: #f5f5dc;
  border: 10px solid #cc0000;
  padding: 25px;
}
#footerbox {
  position: absolute;
  bottom: 10px;
  left: 50px;
  width: 600px;
  height: 30px;
  background: #f5f5dc;
  border: 10px solid #cc0000;
  padding: 25px;
}
#footerlogo {
  overflow: hidden;
  position: fixed;
  bottom: 30px;
  right: 5px;
  background: #f5f5dc;
  border: 10px solid #cc0000;
  overflow: hide;
  width: 250px;
  height: 30px;
  padding: 25px;
}
/* When viewport is large enough to start centering #main */

@media (min-height: 800px) {
    #maincanvas {
        top: 50%;
        transform: translate( -50%, -50% );
    }
}
<div id="maincanvas">
  <div id="logobox">
  </div>
  <div id="contentbox">
    $:content
  </div>
  <div id="footerbox">
  </div>
</div>

For what it's worth, there's a lot to be desired in your markup. You don't need all the absolute positioning you're using. Try and re-use styles if you can. Here is one way you could simplify things.

Note: I replicated your margins on the DIVs inside #main which will create a horizontal scrollbar on narrower viewports. Not sure what is intended here. Perhaps some styling on #main that was not provided in post?

#main {
  position: absolute;
  left: 50%;
  width: 700px;
  height: 800px;
  padding: 25px;
  transform: translateX(-50%);
}
#main > div {
  margin: 0 50px 50px;
  padding: 25px;
  background: #f5f5dc;
  border: 10px solid #C00;
}
#main > div:last-child {
  margin-bottom: 0;
}
#logo {
  height: 50px;
}
#content {
  height: 400px;
}
#footer {
  height: 30px;
}
/* When you know the viewport is large enought to try and center ALL of #main */

@media (min-height: 800px) {
  #main {
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
<div id="main">
  <div id="logo"></div>
  <div id="content">
    <p>
      Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
      Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
    </p>
  </div>
  <div id="footer"></div>
</div>