Question

我现在正在使用此代码：

＆＃13;

.container {
  width: 350px;
  height:600px;
  background-color: lightblue;
}

p {
  margin: 0;
  padding: 0;
}

.text {
  margin: 0;
  padding: 0;
  background-color: #ececec;
}

＆＃13;

<div class="container">
  <img src="http://placehold.it/350x150" />
  <div class="text">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi accusantium, excepturi hic ea dolor doloremque optio minus laboriosam suscipit qui atque a veritatis voluptatum sequi repellendus consequatur provident ratione velit.</p>
  </div>
</div>

＆＃13;

我希望我的<div class="text"></div>将其高度扩展到800px（容器高度）。

我想让它变得敏感。我试着将.text放到450px但它对我没有任何帮助..

感谢您的帮助！

Answer 1

您可以使用 Flexbox ，如果您在flex: 1;上设置.text则会占用.container的可用空间

.container {
  width: 350px;
  height:600px;
  background-color: lightblue;
  display: flex;
  flex-direction: column;
}

p {
  margin: 0;
  padding: 0;
}

.text {
  margin: 0;
  padding: 0;
  background-color: #ececec;
  flex: 1;
}

<div class="container">
  <img src="http://placehold.it/350x150" />
  <div class="text">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi accusantium, excepturi hic ea dolor doloremque optio minus laboriosam suscipit qui atque a veritatis voluptatum sequi repellendus consequatur provident ratione velit.</p>
  </div>
</div>

Answer 2

＆＃13;

$startDate="2017-05-23";
$endDate="2017-05-23";
$empID= "2";

$sql='CALL spAddNewHoliday(:EmployeeID,:StartDate,:EndDate)';
$stmt = $conn->prepare($sql);

$stmt->bindParam('EmployeeID',$empID, PDO::PARAM_STR);
$stmt->bindParam('StartDate',$startDate, PDO::PARAM_STR);
$stmt->bindParam('EndDate',$endDate, PDO::PARAM_STR);

$stmt->execute(); // call the stored procedure

＆＃13;

.container {
  width: 350px;
  height:200px;
  background-color: lightblue;
}

p {
  margin: 0;
  padding: 0;
}

.text {
  margin: 0;
  padding: 0;
  background-color: #ececec;
  height:100%
}

＆＃13;

Answer 3

你有一个容器外面的图像，所以你可以在所有高度上拉伸它。您应该将height .text和img设置为百分比，例如80％和20％。将.text高度和最大高度设置为100％。作为替代方案，您可以使用propeerties显示：table-row和display：table-cell，但它可能会导致一些无法控制的max-properties问题。

Answer 4

您可以将容器设置为相对，将.text的高度设置为100％ .container { width: 350px; height:600px; background-color: lightblue; position: relative; }



p {
    margin: 0;
    padding: 0;
}

.text {
    margin: 0;
    padding: 0;
    background-color: #ececec;
    position: relative;
    height: 100%;
}

p { margin: 0; padding: 0; } .text { margin: 0; padding: 0; background-color: #ececec; position: relative; height: 100%; }

将div扩展为父高度

4 个答案: