Dynamic content resizing and scrolling with bootstrap

submarine rolex

New Member
I have a website I'm trying to design and I have a general layout page where everything will be placed i.e content from other pages I've made, I ran into a problem where my content overflowed and no scrollbar appeared; I looked around and tried a couple of ways to resize my content but none of them worked out so I settled for a temporary fix and made the window size static, can anyone help me with resizing my page based on the screen it's running on. I'm using webmatrix and there will be some C# code in these pages so the extension is cshtml. I am also very new to web development so sorry if my code is messy.\[code\]<!DOCTYPE html><html><head><title>My Page</title><link rel="stylesheet" type="text/css" href="http://stackoverflow.com/Shared/css/bootstrap.css" /><style type="text/css">.body{ padding-top: 60px; padding-bottom: 40px; }.renderBody { height: 462px; overflow: auto; padding-top: 60px; padding-left: 440px; margin: initial; } #login{ padding-right: 0px; }</style><link rel="stylesheet" type="text/css" href="http://stackoverflow.com/Shared/css/bootstrap-responsive.css"/> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/latest/js/bootstrap.min.js"></script> <script src="http://stackoverflow.com/downloads/twitter-bootstrap-hover-dropdown/twitter-bootstrap-hover-dropdown.js?view=1"></script></head><body> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-inner"> <div class="navContainer"> <img src="http://stackoverflow.com/Shared/Images/Logo.png" alt="LogoImage"></img> <form class="navbar-form pull-right"> <ul class="breadcrumb" id="login"> <li> <a href="http://stackoverflow.com/questions/15913791/#">Login</a> <span class="divider"> / <a href="http://stackoverflow.com/questions/15913791/#">Register</a></span></li> </ul> </form> </div> <div class="container"> <button type="button" class="btn btn-navbar" data-toggle="collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="brand" href="http://www.facebook.com">Some Information</a> <div class="nav-collapse collapse"> <ul class="nav"> <li class="active"><a href="http://stackoverflow.com/Login/LoginPage.cshtml">More Information</a></li> <li class="dropdown"> <a href="http://stackoverflow.com/questions/15913791/#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="http://stackoverflow.com/questions/15913791/#">Action</a></li> <li><a href="http://stackoverflow.com/questions/15913791/#">Another action</a></li> <li><a href="http://stackoverflow.com/questions/15913791/#">Something else here</a></li> <li class="divider"></li> <li class="nav-header">Nav header</li> <li><a href="http://stackoverflow.com/questions/15913791/#">Separated link</a></li> <li><a href="http://stackoverflow.com/questions/15913791/#">One more separated link</a></li> </ul> </li> <li class="active"><a href="">Traveling</a></li> <li class="active"><a href="http://stackoverflow.com/questions/15913791/#">Moving</a></li> <li class="active"><a href="http://stackoverflow.com/questions/15913791/#">Sports</a></li> </ul> <!--<form class="navbar-form pull-right"> <ul class="nav"><li class="active"><a href="http://stackoverflow.com/questions/15913791/#" class="active">Register</a></li></ul> </form> </div>--> </div> </div> </div> <div class="renderBody"> @RenderBody() </div> </div></body></html>\[/code\]
 
Top