Question

我知道还有很多其他类似的帖子，但这是我的情况，它只是没有使用上述帖子中提供的解决方案。

这是关于我想要在高度上拉伸的HTML，body和div标签的CSS，div id容器是body标签后页面上的第一个元素：

    body {
    height:100%;
    font-family:Arial;
    font-size:10pt;
    color:#000000;
    margin:0px 0px 0px 0px;
    }
    html { 
    height:100%;
    background: url(./images/background.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./images/background.jpg', sizingMethod='scale')";
    }
    div#container
    {        
    height:100%;
    width:650px;
    margin-top:0px;
    margin-left:auto;
    margin-right:auto;   
    position:relative; 

    box-shadow: 3px 3px 3px #222222;
    border-left: 4px solid #ff6633;
    border-right: 4px solid #3366ff;    
    background-color:#ffffff;
    background-image:url(./images/header.jpg);
    background-size:auto;
    background-position:top center;
    background-repeat:no-repeat;        
    }

这是我的MasterPage文件中的相关HTML：

    <body>
        <form id="form1" runat="server">       
            <div id="container">          
                <div id="header">
                    <!-- here goes my header image and text -->
                </div>  

                <asp:ContentPlaceHolder ID="cphBody" runat="server"/>

                <div id="menu">
                    <!-- here goes my menu links in a line -->
                </div>
            </div>
        </form>
    </body>

Answer 1

问题是你的容器有form：

<body>
    <form id="form1" runat="server">       
        <div id="container">          
            <div id="header">
                <!-- here goes my header image and text -->
            </div>  

            <asp:ContentPlaceHolder ID="cphBody" runat="server"/>

            <div id="menu">
                <!-- here goes my menu links in a line -->
            </div>
        </div>
    </form>
</body>

您需要将#form1的高度属性设置为100％。

请参阅下面的代码段中的条带化示例。

body, html {
  height: 100%;
  margin: 0;
}
#form1 {
  height: 100%;
}
#container {
  border-left: 2px dotted blue;
  height: 100%;
}

<form id="form1" runat="server">
  <div id="container">
    <div id="header">
      header...
    </div>

    ContentPlaceHolder...

    <div id="menu">
      menu
    </div>
  </div>
</form>

Answer 2

是否可以将高度拉伸到完全可见区域，而不管设置最小高度？

尝试在＆＃34; vh＆＃34;中设置容器的高度。而不是％，例如height:100vh;

Answer 3

    <div id="container">          
        <div id="header">
            <!-- here goes my header image and text -->
            lorem
        </div>  

        <asp:ContentPlaceHolder ID="cphBody" runat="server"/>

        <div id="menu">
            <!-- here goes my menu links in a line -->
            lorem
        </div>
    </div>

 #container{
height: 100%;
width:650px;
    margin-top:0px;
    margin-left:auto;
    margin-right:auto;   
    position:relative; 
overflow: hidden;
}

#header, #menu{
    float: left;
    height: 100%;
    padding: 20px;
    width: 100%;
}

div到100％高度不起作用

3 个答案: