问带有GridLayout和按钮的HTML
EN

Stack Overflow用户

提问于 2018-03-06 05:30:01

回答 1查看 371关注 0票数 0

我有以下问题：

CSS-FILE:

我有一个网站，我把它分成两部分。顶部部分( .grid.full)使用屏幕的86 %，底部部分(grid.bott)使用14%的屏幕。(grid.full和grid.bott在css-文件中)

HTML文件

我想在底部插入按钮(在CSS: grid.bott中)。因此，grid.bott在css文件中定义为14%的高度。我的按钮被插入到一个表中，并在CSS (.buttbott)中定义。如何调整按钮的高度符合底部的部分。我要按钮高度从底部80 %的大小。底部的高度与屏幕的距离为14%。

.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;
}

<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>

javascript

html

css

button

responsive-design

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-03-08 02:36:31

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

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

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

/* Buttons für BOTTOM */

.buttbott {
  height: 80%;
}

下面是完整的演示：

.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;
}

<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>