Question

我试图让孩子的div高度100％，但它不起作用，所以我想知道它为什么不起作用：我给html，身高：100％然后.hero身高100％和.hero-image必须是100％：

html, body{
    height:100%;
}
.hero{
    width:100%;
    height:100%;
    border:1px solid #0094ff;
    .hero-image{
        width:100%;
        height:100%;
        background-image:url('../images/1.jpg');
        background-size:cover;
    }
}

<section class="hero">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-6">
                <div class="hero-image">
                    Hello
                </div>
            </div>
            <div class="col-lg-6">
                <div class="hero-content">
                    <h1>Hey, I Am Mike Ross</h1>
                    <p>
                        Creative Art Director from San Francisco. Husband, photographer, surfer and tech fanatic.
                    </p>
                </div>
                <div class="skills">

                </div>
            </div>
        </div>
    </div>
</section>

Answer 1

高度100％是一个非常难以捉摸的问题，通常会产生比解决的问题更多的问题。但是，要回答你的问题：

基本上，height: 100%;元素与您想要100％的元素之间的每个容器都必须有/* These styles get all of the containers to 100% height */ /* address ONLY sub-elements of .hero element to prevent issues with other pages / code */ .hero .container-fluid, .hero .row, .hero [class*="col-"] { height: 100%; }。

因此，在您的情况下，这意味着必须添加以下CSS：

col-sm-6

以下是您的代码，内置于代码段中，因此您可以看到它的工作原理。请注意，我还在您的col-lg-6元素中添加了html, body { height: 100%; } .hero { width: 100%; height: 100%; border: 1px solid #0094ff; } .hero-image { width: 100%; height: 100%; background-image: url('http://via.placeholder.com/500x100'); background-size: cover; } /* These styles get all of the containers to 100% height */ .hero .container-fluid, .hero .row, .hero [class*="col-"] { height: 100%; }个类，以便您可以在更窄的窗口中看到它。（注意：点击＆＃34;展开代码段＆＃34;链接以获得足够宽的窗口以查看其是否正常工作。）

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<section class="hero">
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-6 col-sm-6">
        <div class="hero-image">
          Hello
        </div>
      </div>
      <div class="col-lg-6 col-sm-6">
        <div class="hero-content">
          <h1>Hey, I Am Mike Ross</h1>
          <p>
            Creative Art Director from San Francisco. Husband, photographer, surfer and tech fanatic.
          </p>
        </div>
        <div class="skills">

        </div>
      </div>
    </div>
  </div>
</section>

＆＃13;

db.CreatePreparedStatement("UPDATE kontakty SET Telefon = ?,Mobil = ?,Email = ? WHERE `idKontakty` = ?");
db.SetInt(1, Integer.parseInt(jTextFieldTelefon.getText()));
db.SetInt(2, Integer.parseInt(jTextFieldMobil.getText()));
db.SetString(3, jTextFieldEmail.getText());
db.SetInt(4, 1);

＆＃13;

Answer 2

.hero-image不占100％父母，因为容器流体，行和col-lg-6高度不是100％

＆＃13;

html, body{
    height:100%;
}
.hero{
    width:100%;
    height:100%;
    border:1px solid #0094ff;

}


.heroFullHeight{
    /*height: inherit;*/
     height:100%;

}
.hero-image{
    width:100%;
    height:100%;
    background-image:url('../images/1.jpg');
    background-size:cover;
  	background-color: red;
}

＆＃13;

<section class="hero">
    <div class="container-fluid heroFullHeight">
        <div class="row heroFullHeight">
            <div class="col-lg-6 heroFullHeight">
                <div class="hero-image">
                    Hello
                </div>
            </div>
            <div class="col-lg-6">
                <div class="hero-content">
                    <h1>Hey, I Am Mike Ross</h1>
                    <p>
                        Creative Art Director from San Francisco. Husband, photographer, surfer and tech fanatic.
                    </p>
                </div>
                <div class="skills">

                </div>
            </div>
        </div>
    </div>
</section>

＆＃13;

高度100％不适用于嵌套div

2 个答案: