html - Website goes off-screen in height -
i building website , created nice layout need. on smaller (laptop) screens content higher screen, , not allow 1 scroll , down. instead keeps showing exact center of content.
how add scroll-bar entire page, people not fixed center of page ?
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 different overflow settings, far, didn't manage result after. overflow can scroll content of boxes, need scroll site (canvas?)
hoping not duplicate, did search, maybe lack exact keyword search for.
the issue you're running use of position: fixed;.
from mdn regaurding fixed positioning.
fixed positioning: not leave space element. instead, position @ specified position relative screen's viewport , don't move when scrolled.
so adding scroll overflow property won't anything. element fixed positioning isn't taking space , positioned relative viewport in way.
what want position: absolute; , modification top attribute smaller screens.
#maincanvas { /* note: use margin: 0 auto; center on larger screens need left , top set 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 large enough 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 it's worth, there's lot desired in markup. don't need absolute positioning you're using. try , re-use styles if can. here 1 way simplify things.
note: replicated margins on divs inside #main create horizontal scrollbar on narrower viewports. not sure intended here. perhaps styling on #main 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 know viewport large enought try , center 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>
Comments
Post a Comment