NotionCommotion Posted December 2, 2015 Share Posted December 2, 2015 Hi, I have a layout with a sidebar and image background. Please see https://output.jsbin.com/gujonedije. If the amount of content in #custom-content exceeds a given amount, I either need a scrollbar or need the total height of the page to increase. As seen, I have added a scrollbar, but it looks a little odd as it is centered in the page. Given the sidebar, is it possible to put it on the far right of the page? Or can I modify the script to allow the total height of the page to increase? Not sure how to do this given the full page image background. Thanks <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Testing template</title> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css"> <link rel="stylesheet" type="text/css" href="main.css"> </head> <body class="metal"> <div id="header"> </div> <div id="middle"> <div id="sidebar"><p>My Sidebar</p></div> <div id="content"> <ul id="mainMenu"></ul> <div id="wrapper"> <div style="height:400px;">Stuff goes here. Keep height fixed.</div> <div id="custom-content"> <p>Page should adapt to this content.</p> <p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p> </div> </div> </div> </div> <div id="footer"> <div class="footer-block"> <div class="footer-bottom"> <ul id="subMenu" class="submenu"></ul> </div> </div> </div> </body> </html> #custom-content{height:400px;overflow-y:auto;} body { font-family:Arial, Helvetica, sans-serif; background-color: #CECECE } .right{float:right;} .left{float:left;} .clear { clear:both; } #header { height:60px; background:url(http://i.imgur.com/sihSa9h.png) repeat-x #e2e2e2; } #middle { /* DONE LATER: background-image: url("../images/background3.jpg "); */ background-repeat: no-repeat; background-size: cover; background-position: center; height:900px; min-width: 1015px;/*960px(content)+50px(sidebar) plus a little extra for good measures */ } #sidebar { /*background-color: #FFFFFF; opacity: 0.30;*/ background: rgba(255, 255, 255, .3); filter: alpha(opacity=30); /*ie8*/ border-right: 4px solid #f15a29; height:100%; width:50px; float:left; } #sidebar p { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); position: relative; top: 50%; font-size:30px; white-space: nowrap; } #content {margin:0 auto; width: 960px;padding-top:45px;overflow-x:auto;height:100%} #wrapper{padding-top:20px;} #footer { height:60px; background:url(http://i.imgur.com/juPqbXY.png) repeat-x #e2e2e2; } #footer .footer-block { width:960px; margin:0 auto; } #footer .footer-bottom { clear:both; margin-top:3px; } body.metal #middle { background-image:url(http://i.imgur.com/UlDBmPh.jpg); } #middle div { color:#FFF; } Quote Link to comment Share on other sites More sharing options...
maxxd Posted December 3, 2015 Share Posted December 3, 2015 If you want #wrapper to stay the same height, but #custom_content to expand the height of the page as content is entered, take #custom_content out of #wrapper and put a float: none; on both. Change 'height' to 'min-height' in the CSS for #middle. Put the background image on the body itself and set it to position: fixed, and that should do it (assuming I'm understanding the question correctly). Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.