在我寫這個問題之前，我嘗試了this solution，但它不起作用。ASP.Net中的容器流體高度不是100％

我有這樣的佈局在ASP.net頁：


 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="ToolDesign.Home" %> 
 

 
    <!DOCTYPE html> 
 

 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
 
    <head runat="server"> 
 
     <title>Availability Test</title> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
     <!-- Bootstrap --> 
 
     <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
     <script type="text/javascript" src="/Scripts/jquery-1.9.1.js"></script> 
 
    <script type="text/javascript" src="/Scripts/bootstrap.js"></script> 
 

 
     <style> 
 
     body { 
 
      position: relative; 
 
     } 
 
     #section1 {padding-top:50px;height:500px;color: #fff; background-color: #009688;} 
 
     #section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;} 
 
     #section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;} 
 
     #section4 {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;} 
 
     #section42 {padding-top:50px;height:500px;color: #fff; background-color: #009688;} 
 

 

 
     <!-- make page stretch --> 
 
     html, body { 
 
     height: 100%; 
 
    } 
 
    .container-fluid { 
 
     height: 100%; 
 
     overflow-y: hidden; /* don't show content that exceeds my height */ 
 
    } 
 
    .body-film { 
 
     min-height: 100%; 
 
     overflow-y: hidden; /* don't show content that exceeds my height */ 
 
    } 
 
     </style> 
 
    </head> 
 
    <body data-spy="scroll" data-target=".navbar" data-offset="60"> 
 

 
     <nav class="navbar navbar-inverse navbar-fixed-top"> 
 
     <div class="container"> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span>       
 
      </button> 
 
      <a class="navbar-brand" href="#">Availability Tool</a> 
 
     </div> 
 
     <div> 
 
      <div class="collapse navbar-collapse" id="myNavbar"> 
 
      <ul class="nav navbar-nav"> 
 
       <li><a href="#section1">Home</a></li> 
 
       <li><a href="#section2">Availability Test</a></li> 
 
       <li><a href="#section3">Monitoring</a></li> 
 
       <li><a href="#section4">About</a></li> 
 
      </ul> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </nav>  
 

 
    <div id="section1" class="container-fluid"> 
 
     <h1>Home section</h1> 
 
     <p>Greeting text</p> 
 

 
    </div> 
 
    <div id="section2" class="container-fluid"> 
 
     <h1>Availability section</h1> 
 
     
 
    </div> 
 
    <div id="section3" class="container-fluid"> 
 
     <h1 style="text-align: center; font-size: 300%;; vertical-align: middle; line-height: 90px; margin-top: 100px;">Soon..</h1> 
 
    </div> 
 
    <div id="section4" class="container-fluid"> 
 
     <h1>About</h1> 
 
     <p>Tool version and team name</p> 
 

 
    </div> 
 

 

 
    </body> 
 
    </html>

的問題是高度不會適合全屏幕截圖如下所示：

我使用的是最新版本的Bootstrap 3.3.7

來源

2017-02-28 Omar

處理高度和百分比時始終牢記層次結構。如果你想讓一個塊的伸展率達到100％，那麼這個元素上面的所有父母也必須達到100％的高度。例如，'html> body> div.div1> div.div2 {height：100％; }'。如果你想'div.div2 {height：100％; }'，你需要確保你相應地設置下面的內容'html，body，.div1 {height：100％; }'。而在asp.net應用程序中，您很可能只在您的身體代碼中包含表單標記。在添加CSS時考慮您的層次結構。 – Pegues

另外，請務必使用'* {box-size：border-box; }處理這種特殊佈局時。然後，您可以應用底部填充，看起來像您需要粘滯頁腳。您的底部填充（很可能分配給身體標記）將與粘滯頁腳的高度相同。然後，將'position：fixed'應用於粘腳，以便始終將其保留在屏幕的底部。 – Pegues

@Pegues是的親愛的感謝，你是對的我解決了這個問題，我會更新問題 – Omar

我以前遇到過這個問題 - 使用Web窗體創建「粘性頁腳」。這個問題幾乎總是與Web窗體項目模板中自動添加的窗體標籤有關。假定其他一切都在你的標記和CSS正確的，試試這個：

html, body, form 
{ 
    height: 100%; 
}

有了這些知識的「形式」標籤的問題與Web窗體（真正的問題是，我們忘記加上「形式」我們CSS選擇器），這裏是創造粘頁腳的基本理論：

https://css-tricks.com/couple-takes-sticky-footer/

還沒來得及嘗試你的代碼，但我發現內聯CSS，你需要移動到一個樣式表等等。最好的建議是創建一個簡單的表單和母版頁來測試一個解決方案 - 然後在測試頁面保持內容簡短驗證它是否有效。

來源

2017-02-28 14:16:40 IrishChieftain

感謝您的回覆，我試圖添加'窗體'標籤，因爲你提到，但仍然是同一問題 – Omar

我解決了這個問題，請參閱更新 – Omar

您不應該需要「位置：相對;」... – IrishChieftain

（發表於OP）。

答案

的問題是與css風格。首先服用section風格：

#section1 {padding-top:50px;height:500px;color: #fff; background-color: #009688;} 
    #section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;} 
    #section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;} 
    #section4 {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;} 
    #section42 {padding-top:50px;height:500px;color: #fff; background-color: #009688;}

注意到，height:500px必須100%因爲我們需要每個部分填寫screan。

二我們需要添加form標籤中body風格像以及移動屬於身體到該塊，所有的CSS：

html, body, form { 
     height: 100%; 
     position: relative; 
    }

Finaly我們刪除不必要的CSS和最後的CSS代碼將爲：

 html, body, form { 
      height: 100%; 
      position: relative; 
     } 
    #section1 {padding-top:50px;height:100%;color: #fff; background-color: #009688;} 
    #section2 {padding-top:50px;height:100%;color: #fff; background-color: #673ab7;} 
    #section3 {padding-top:50px;height:100%;color: #fff; background-color: #ff9800;} 
    #section4 {padding-top:50px;height:100%;color: #fff; background-color: #00bcd4;}

來源

2017-03-03 12:15:49 halfer

ASP.Net中的容器流體高度不是100％

回答

答案

相關問題