0

すべての辺に 20px の余白を除いてページ全体をカバーする要素を作成する必要があります。これを試してみると、Webkit ブラウザーと Firefox で動作しますが、Internet Explorer (10) と Opera には問題があります :-( 。これを解決する方法はありますか?

HTML

<div id="first">
    <div id="second">
        Hello world!
    </div>
</div>

CSS

head, body
{
    width: 100%;
    height: 100%;
}

body
{
    position: absolute;
    margin: 0;
    background-color: blue;
    display: table;
}

#first
{
    display: table-cell;
    height: 100%;
    width: 100%;
    padding: 20px;
}

#second
{
    height: 100%;
    width: 100%;
    background-color: white;
}
4

3 に答える 3

3

私はお勧めします：

#first {
    display: table-cell;
    position: absolute;
    top: 20px;
    right: 20px;
    bottom: 20px;
    left: 20px;
}

これにより、要素20pxが各側面から離れて配置されます。ただし、使用しないことをお勧めdisplay: table-cell;します。display: table-rowこれには、親要素が必要であり、それ自体が親要素である必要があるためdisplay: tableです。

また、テーブルベースのレイアウトをエミュレートしようとしているようです。解決しようとしている全体的な問題をリストできれば、より良い/より有用な回答が得られる可能性があります。

于 2013-07-03T09:49:08.737 に答える
1

これはどうですか？必要なマージンをボーダーに置き換えるだけです：

#first
{
    display: table-cell;
    height: 100%;
    width: 100%;
    border: 20px solid blue;
    background-color: white;
}
于 2013-07-03T09:51:47.960 に答える