1

div 内に 2 つのボタンがありますが、垂直方向の残りのスペース全体を占めるようにします。

ちょうど今、それはこのように見えます:

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


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

2 つの送信ボタンがスペース全体を占有するようにするにはどうすればよいですか?

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 に答える