Demo

Question

我在div中有两个按钮，但我希望它们占据整个垂直空间。

刚才看起来像这样：

Header
---------------------------
BUTTON 1
BUTTON 2


---------------------------
FOOTER

如何让两个提交按钮占据整个空间？

HTML：

<body>
<header>
    <h1>{title}</h1>
</header>
<div id="wrapper">
    <div id="main-content">
            <!--<div class="innerInstructions">Choose your direction.</div>-->
            <form action="app-web.php" method="get" class="main-form clocking">
                <input type="hidden" name="do" value="performclock" />
                <input type="hidden" name="uid" id="uid" value="'.$uid.'" />
                <input type="submit" name="clockaction" value="IN &rarr;" accesskey="I" />
                <input type="submit" name="clockaction" value="&larr; OUT" accesskey="O" />
            </form>


    </div>
</div>
<footer>
    <div id="time">{time}</div>
</footer>
</body>

CSS：

#wrapper {
    position:absolute;
    z-index:1;
    top:45px; bottom:48px; left:0;
    width:100%;
    overflow:none;
}
#main-content {
    position:absolute;
    z-index:1;
    width:100%;
    padding:0;
    color: white;
    height: 100%;
}
.clocking{
    margin-top: 5px;
}
.clocking input[type="submit"]{
    /*width: 45%;*/
    /*padding-top: 10%;
    padding-bottom: 10%;*/
    height: 100%;
    min-height: 100%;
    font-size: 2em;
    font-weight: bold;
    background:#deb500;
    border: 1px solid white;
    color: white;
    border-radius: 5px;
}

Answer 1

我为你做了一个演示小提琴，看看

Demo

这是主要代码

html, body{
    height:100%;
    margin:0;
}

header,footer{
    height:10%;
}

form{
    height:80%;
}

input[type="submit"]{
    height:50%;
    display:block;
    width:200px;
    border:1px solid #FFF;
}

Answer 2

在position:absolute;上使用#main-content，您将#main-content带出布局。它充当一个单独的层，阻止#wrapper允许内容流动。

如果您希望它垂直占据更多空间，或者将#wrapper设为固定高度，请将其移除并添加填充底部到#wrapper。

使对象垂直填充剩余的div

2 个答案:

Demo