如何用另一个div填充div的剩余部分？

Question

我的div内有button。该按钮是基本的Bootstrap按钮。这是我的代码：

<div class="generateBtn">
            <button class="btn">Generate Statement</button>
</div>

generateBtn的css看起来像这样：

.generateBtn {
    background: #ccc;
    padding: 10px 10px 10px 30px;
}

以下是该页面上的图片：

我想在div之后的button中添加一条消息，我希望文本是多行的并且居中。以下是我希望将div放在页面上的方法。

我一直把div和文字直接放在下面，我的文字包装错了。有人能告诉我如何添加这个吗？

Answer 1

尝试这个工作。 DEMO at JSBin

<强> HTML：

<div id="container">
  <div id="bottomContainer">
     <div id="buttonDiv">
        <button id="generateButton">Generate Statement</button>
     </div> 

     <div id="requiredDiv">    </div> 
  </div>
  <div id="demoText">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when ...<p>
  </div>
</div>

<强> CSS：

#container{
  position:relative;
  width:800px;
  height:300px;
  background-color:#E2E3DE;
}

#bottomContainer{
  width:100%;
  height:45px;
  position:absolute;
  bottom:0;
  background-color:#CBCBCB;
  padding:10px 0;
}

#generateButton {
   padding: 10px 10px 10px 20px; 
}

#buttonDiv{
   margin-left:10px;
   background: #ccc;
   float:left;
}

#requiredDiv{
  width:70%;
  float:left;
  margin-left:200px;
  height:44px;
  top:15%;
  position:absolute;
 background-color:#9EAAB2;
 }

#requiredDiv p{
  top:-15%;
  position: relative;
  text-align:center;
  color:#fff;
  font-size:0.8em;
} 

#demoText{
  display:none;
}

<强> jQuery的：

 $("#generateButton").click(function(){
      var getdivText= $("#demoText").html();
      $("#requiredDiv").html(getdivText);
  });

Answer 2

<强> FIDDLE

您可以尝试在div中嵌套div，并使用文本属性设置父div，并在按钮中添加其他类来处理填充和放置......

HTML：

<div class="parent">
  <div class="generateBtn fLeft">
    <button class="btn">Generate Statement</button>
  </div>
  <p> this is the extra copy you want to add to the location with the multi-line set up...style as needed.</p>
</div>

的CSS：

.fLeft { float:left; }

.generateBtn {
    background: #ccc;
    padding: 10px 10px 10px 30px;
}

.parent {
    background: #ccc;
    overflow:auto;
}

.parent p {
    -add styles for copy here as needed-
}