为什么 100% 高度和 100% 宽度在我的 ASPX 页面中不起作用？

问题描述 投票：0回答：2

CSS 和 html 单独工作就可以正常工作：

body, html {
    height: 100%;
    min-height:600px;
    min-width:800px;
    overflow:hidden;
    margin:0;padding:0;
}
html {overflow:auto;}

.fill {height:100%; width:100%; background-color:green;}

.flex-container {   
    display: flexbox; 
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */

}
.flex-1 {
    -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1;         /* OLD - Firefox 19- */
    -webkit-flex: 1;          /* Chrome */
    -ms-flex: 1;              /* IE 10 */
    flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.flex-column {
    flex-direction:column; 
    -webkit-flex-direction: column; 
    -webkit-box-orient:vertical; 
    -moz-box-orient: vertical; 
    box-orient: vertical;
    -moz-flex-direction:column;
    -ms-flex-direction:column;
}

.centering { margin: auto; }

.centre-form { width: 40%; max-width:400px; }

.content-padding {padding:2.5%;}

.profile-centre { width:70%; max-height:90% /*max-width: 1200px;*/}
.profile-box {width: 46.6%; /*max-width: 560px;*/ max-height:80%; background-color:white; padding-top: 0.8%; padding-left: 0.8%; padding-right: 0.8%;}
#lifestyle {height:80%;}
.profile-form {margin-right:5px; margin-left:auto; padding-right:3%;}
.profile-form-label {margin-right:0.8%}
.profile-text-box {width:50%;}
.profile-gender {width:25%; margin-right:25%;}
.profile-date {width:16.7%;}
.profile-slider {width:50%;}
.profile-slider-label {margin-right:1%;}

.create-centre {width:85%;}
.create-form {width: 50%;}
.create-form-inner{padding-right:30%; margin:0;}
.create-text-box {width:50%;}
.create-gender {width: 40%; margin-right: 10%;}
.create-date {width:16.7%;}
.create-lifestyle {width: 49%;}
.create-lifetyle-form {width: 95%;}

.statInput{width:10%};
.statGraphContainer{height:300px; width:100%;}
.statGraphSwap{cursor:pointer;}

.left-align {float:left;}
.right-align {float:right;}

.y-scroll-only {overflow-y:auto; overflow-x:hidden; }


.clearing {clear:both;}
.hidden {display:none;}
<body>
  <div id="div" class="fill" >Div</div>
</body>

但是，当包含在我的 ASPX 页面中时它不起作用，我已禁用并删除了我之前添加的所有其他 html 内容和 javascript，并且文件后面的代码仅包含一个空的 Page_Load 方法：

body, html {
    height: 100%;
    min-height:600px;
    min-width:800px;
    overflow:hidden;
    margin:0;padding:0;
}
html {overflow:auto;}

.fill {height:100%; width:100%; background-color:green;}

.flex-container {   
    display: flexbox; 
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */

}
.flex-1 {
    -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1;         /* OLD - Firefox 19- */
    -webkit-flex: 1;          /* Chrome */
    -ms-flex: 1;              /* IE 10 */
    flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.flex-column {
    flex-direction:column; 
    -webkit-flex-direction: column; 
    -webkit-box-orient:vertical; 
    -moz-box-orient: vertical; 
    box-orient: vertical;
    -moz-flex-direction:column;
    -ms-flex-direction:column;
}

.centering { margin: auto; }

.centre-form { width: 40%; max-width:400px; }

.content-padding {padding:2.5%;}

.profile-centre { width:70%; max-height:90% /*max-width: 1200px;*/}
.profile-box {width: 46.6%; /*max-width: 560px;*/ max-height:80%; background-color:white; padding-top: 0.8%; padding-left: 0.8%; padding-right: 0.8%;}
#lifestyle {height:80%;}
.profile-form {margin-right:5px; margin-left:auto; padding-right:3%;}
.profile-form-label {margin-right:0.8%}
.profile-text-box {width:50%;}
.profile-gender {width:25%; margin-right:25%;}
.profile-date {width:16.7%;}
.profile-slider {width:50%;}
.profile-slider-label {margin-right:1%;}

.create-centre {width:85%;}
.create-form {width: 50%;}
.create-form-inner{padding-right:30%; margin:0;}
.create-text-box {width:50%;}
.create-gender {width: 40%; margin-right: 10%;}
.create-date {width:16.7%;}
.create-lifestyle {width: 49%;}
.create-lifetyle-form {width: 95%;}

.statInput{width:10%};
.statGraphContainer{height:300px; width:100%;}
.statGraphSwap{cursor:pointer;}

.left-align {float:left;}
.right-align {float:right;}

.y-scroll-only {overflow-y:auto; overflow-x:hidden; }


.clearing {clear:both;}
.hidden {display:none;}
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>

<!DOCTYPE html>

<html lang="en">
    <head runat="server">
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
        <title>Title</title>

        <asp:PlaceHolder runat="server">
            <%: Scripts.Render("~/bundles/modernizr") %>
        </asp:PlaceHolder>

        <webopt:bundlereference runat="server" path="~/Content/css" />
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

    </head>
    <body>
        
        <form runat="server">
            <asp:ScriptManager runat="server" EnablePartialRendering="true">
                <Scripts>
                    <%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=301884 --%>
                    <%--Framework Scripts--%>
                    <asp:ScriptReference Name="MsAjaxBundle" />
                    <asp:ScriptReference Name="jquery" />
                    <asp:ScriptReference Name="bootstrap" />
                    <asp:ScriptReference Name="respond" />
                    <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
                    <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
                    <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
                    <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
                    <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
                    <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
                    <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
                    <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
                    <asp:ScriptReference Name="WebFormsBundle" />
                    <%--Site Scripts--%>
                </Scripts>
            </asp:ScriptManager>
            <div id="div" class="fill" >Div</div>
            
            

        
         
        </form>

        

    </body>
</html>

html css asp.net
2个回答
2
投票

您的问题是，在您的实际页面中，

.fill
包含在
form
中。这个 
form
没有 
height
或 
width
并且是 
display: block;
，因此它占据了容器的整个宽度 (
body
) 并使用了所需的高度。

您有几个选择：

  • 将 
    fill
    类移至 
    form
  • 将 
    height: 100%;
    添加到 
    form
    以确保它占据 
    100%
    的 
    body
    height

简化示例：

body,
html {
  height: 100%;
  min-height: 600px;
  min-width: 800px;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
html {
  overflow: auto;
}
form {
  height: 100%;
}
.fill {
  height: 100%;
  width: 100%;
  background-color: green;
}
<!DOCTYPE html>
<html lang="en">
  <body>
    <form runat="server">
      <div id="div" class="fill">Div</div>
    </form>
  </body>
</html>

0
投票
  1. Buatlah 网络表格 dengan tampilan berikut 尼姆 纳玛唐嘎拉希尔 阿拉马特 课程研究 照片特写 法律规定

2.Buatlah 源代码 untuk menyimpan data dari form tersebut, tampilkan hasil simpan dibawah 按钮 Simpan Data。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.