Question

单独的CSS和html在小提琴中运行良好：

＆＃13;

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;}

＆＃13;

<body>
  <div id="div" class="fill" >Div</div>
</body>

＆＃13;

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

＆＃13;

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;}

＆＃13;

<%@ 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>

＆＃13;

Answer 1

您的问题是，您的实际网页.fill包含在form中。此form没有height或width且display: block;，因此它占据了它的容器（body）的全宽并使用尽可能多的高度。

您有几个选择：

将fill课程移至form
将height: 100%;添加到form，以确保它占用100% body

height

简化示例：

＆＃13;

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;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
  <body>
    <form runat="server">
      <div id="div" class="fill">Div</div>
    </form>
  </body>
</html>

＆＃13;

为什么我的ASPX页面没有100％的高度和100％的宽度？

1 个答案: