Question

我有以下问题：

的 CSS-FILE：

我有一个网站，我分为两部分。顶部（.grid.full）使用86％的屏幕，底部（grid.bott）使用14％的屏幕。（grid.full和grid.bott在css文件中）

HTML文件

我想在底部插入一个Button（在CSS：grid.bott中）。所以grid.bott在css文件中定义为14％的高度。我的按钮插入表中并在CSS（.buttbott）中定义。如何调整与底部兼容的按钮高度。我希望按钮高度从底部开始大小的80％。底部与屏幕的高度为14％。

＆＃13;

.wrapper {
  height: 100%;
}


/* grid */

.grid {
  bottom: 0;
  position: absolute;
  top: 0;
  width: 100%;
}


/* Use 43% of the screen */

.grid .span {
  background: white;
  box-sizing: border-box;
  float: left;
  height: 43%;
  position: relative;
  width: 100%;
  /* 3 columns */
}


/* Use 86% of the screen */

.grid .full {
  background: white;
  box-sizing: border-box;
  float: left;
  height: 86%;
  position: relative;
  width: 100%;
  /* 3 columns */
}


/* Use 14% of the screen*/

.grid .bott {
  background: #fdc400;
  float: left;
  height: 14%;
  position: relative;
  width: 100%;
  /* 3 columns */
}


/* Buttons für BOTTOM */

.buttbott {
  border: 1px outset blue;
  background-color: darkgrey;
  height: 110px;
  width: 110px;
  cursor: pointer;
  border-radius: 10px;
  font-size: 110%;
  font-weight: bold;
}

＆＃13;

<div class="grid">
  <div class="wrapper">
    <div class="full">
      <br/>
      <h3>TEST PAGE</h3>
      <hr>
    </div>
    <div class="bott">
      <div class="container">
        <table id="buttons">
          <tr>
            <th>
              <input id="index" class="buttbott" type="button" value="HOME" />
            </th>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 1

要使按钮的高度为.bott元素高度的80％，我们首先需要定义.bott元素中其他元素的高度。即：

.container,
#buttons,
#buttons tr {
  height: 100%;
}

然后我们可以将按钮的高度设置为80%。

/* Buttons für BOTTOM */

.buttbott {
  height: 80%;
}

这是完整的演示：

＆＃13;

.wrapper {
  height: 100%;
}


/* grid */

.grid {
  bottom: 0;
  position: absolute;
  top: 0;
  width: 100%;
}


/* Use 43% of the screen */

.grid .span {
  background: white;
  box-sizing: border-box;
  float: left;
  height: 43%;
  position: relative;
  width: 100%;
  /* 3 columns */
}


/* Use 86% of the screen */

.grid .full {
  background: white;
  box-sizing: border-box;
  float: left;
  height: 86%;
  position: relative;
  width: 100%;
  /* 3 columns */
}


/* Use 14% of the screen*/

.grid .bott {
  background: #fdc400;
  float: left;
  height: 14%;
  position: relative;
  width: 100%;
  /* 3 columns */
}

.container,
#buttons,
#buttons tr {
  height: 100%;
}


/* Buttons für BOTTOM */

.buttbott {
  border: 1px outset blue;
  background-color: darkgrey;
  height: 80%;
  width: 110px;
  cursor: pointer;
  border-radius: 10px;
  font-size: 110%;
  font-weight: bold;
}

＆＃13;

<div class="grid">
  <div class="wrapper">
    <div class="full">
      <br/>
      <h3>TEST PAGE</h3>
      <hr>
    </div>
    <div class="bott">
      <div class="container">
        <table id="buttons">
          <tr>
            <th>
              <input id="index" class="buttbott" type="button" value="HOME" />
            </th>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>

＆＃13;

带有GridLayout和Buttons的HTML页面

1 个答案: