动态内容调整大小和滚动与引导

我有一个网站，我试图设计，我有一个总的布局页面，其中一切都将被放置，即我从其他网页的内容，我遇到了一个问题，我的内容溢出并且没有滚动条出现;我环顾四周，尝试了几种方法来调整内容的大小，但没有一个能解决问题，所以我决定进行临时修复，并将窗口大小设置为静态，任何人都可以帮助我根据正在运行的屏幕调整页面大小。我使用的是webmatrix，这些页面中会有一些C＃代码，所以扩展名是cshtml。如果我的代码很混乱，我也对网络开发非常陌生。动态内容调整大小和滚动与引导

<!DOCTYPE html> 
<html> 
<head> 
<title>My Page</title> 

<link rel="stylesheet" type="text/css" href="/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="/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="/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="/Shared/Images/Logo.png" alt="LogoImage"></img> 
       <form class="navbar-form pull-right"> 
        <ul class="breadcrumb" id="login"> 
         <li> <a href="#">Login</a> 
         <span class="divider">/
         <a href="#">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="/Login/LoginPage.cshtml">More Information</a></li> 

    <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">Dropdown <span class="caret"></span></a> 
        <ul class="dropdown-menu"> 
        <li><a href="#">Action</a></li> 
        <li><a href="#">Another action</a></li> 
        <li><a href="#">Something else here</a></li> 
        <li class="divider"></li> 
        <li class="nav-header">Nav header</li> 
        <li><a href="#">Separated link</a></li> 
        <li><a href="#">One more separated link</a></li> 
        </ul> 
       </li> 
      <li class="active"><a href="">Traveling</a></li> 
      <li class="active"><a href="#">Moving</a></li> 
      <li class="active"><a href="#">Sports</a></li> 
      </ul> 

      <!--<form class="navbar-form pull-right"> 
         <ul class="nav"><li class="active"><a href="#" class="active">Register</a></li></ul> 
      </form> 
      </div>--> 
     </div> 
     </div> 
    </div> 

      <div class="renderBody"> 
       @RenderBody() 
      </div> 
       </div> 
</body> 

</html>

来源

2013-04-09 Question Mcquestioner

有一些事情你可以尝试布局明智的，你去了屏幕测量的道路在脚本之前：

首先，一定要使用视meta标签（https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag）：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

接着，包裹RenderBody自举容器类：

<div id="main" class="container"> 
    @RenderSection("featured", required: false) 
    <section> 
     @RenderBody() 
    </section> 
</div>

铝因此，如果您不熟悉它，您可能需要阅读引导程序中的流体网格系统（http://twitter.github.io/bootstrap/scaffolding.html#fluidGridSystem）

最后，如果所有其他方法都失败，则可以在内容容器上使用溢出CSS属性：

.renderBody { 
    overflow-x: scroll; 
}

来源

2013-06-30 19:26:26 dperish

动态内容调整大小和滚动与引导

回答

相关问题