带有GridLayout和按钮的HTML
带有GridLayout和按钮的HTML
提问于 2018-03-06 13:30:01
我有以下问题：
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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-03-08 10: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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49132023
复制相关文章
相似问题
腾讯云开发者
