1

我有两个按钮位于一个 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;
}
4

2 回答 2

4

我制作了一个演示小提琴供您查看

演示

这是主要代码

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;
}
于 2013-07-17T20:54:39.897 回答
1

通过使用position:absolute;on#main-content您正在#main-content退出布局。它充当一个单独的层，阻止#wrapper内容流动。

#wrapper如果您希望它垂直占用更多空间或提供#wrapper固定高度，请删除它并添加 padding-bottom 。

于 2013-07-17T20:59:43.467 回答