答案

Question

在我写这个问题之前，我尝试this solution，但它不起作用。

我在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

Answer 1

我之前遇到过这个问题 - 使用Web窗体创建一个“粘性页脚”。问题几乎总是与表单标记有关，表单标记自动添加到Web窗体项目模板中。假设你的标记和CSS中的其他一切都是正确的，试试这个：

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

有了Web Forms的“form”标签问题的知识（真正的问题是我们忘记将'form'添加到我们的CSS选择器中），这里是创建粘性页脚的基本理论：

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

没有时间试用你的代码，但我注意到你需要移动到样式表的内联CSS等。最好的建议是创建一个简单的表单和母版页来测试解决方案 - 保持内容在测试页面中缩短，然后验证它是否有效。

Answer 2

（代表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标记，以便将属于body的所有CSS移动到此块中：

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

最后我们删除了不必要的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;}

ASP.Net页面中容器流体的高度不是100％

2 个答案:

答案