gpt4 book ai didi

html - ASP.Net 页面中 Container Fluid 的高度不是 100%

转载 作者:行者123 更新时间:2023-11-28 15:46:59 25 4
gpt4 key购买 nike

在我写这个问题之前,我尝试了 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>

问题是高度不适合全屏,如下图所示:

Screenshot of how the above code working with me

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

最佳答案

我以前遇到过这个问题 - 使用 Web 窗体创建“粘性页脚”。问题几乎总是与自动添加到 Web 窗体元素模板中的窗体标记有关。假设您的标记和 CSS 中的其他所有内容都是正确的,请尝试以下操作:

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

了解 Web 表单的“表单”标签问题(真正的问题是我们忘记在 CSS 选择器中添加“表单”),下面是创建粘性页脚的基本理论:

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

还没有时间尝试您的代码,但我注意到内联 CSS,您需要将其移动到样式表等。最好的建议是创建一个简单的表单和母版页来测试解决方案 - 保留内容在您的测试页中做空,然后验证它是否有效。

关于html - ASP.Net 页面中 Container Fluid 的高度不是 100%,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42506632/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com