0

ブラウザ ウィンドウのサイズを使用して div のサイズを動的に変更する方法についての提案を探しています。css を使用しようとしましたが、パーセント値を使用できないため、それを機能させることができません。div のサイズを (windowSize - 100)/3 にする必要があります。どんな提案もありがとう

4

3 に答える 3

2

CSSには、calc()それを行うことができるというものがあります：

http://jsfiddle.net/YFFcD/1/

div {
    width: calc((100% - 100px) / 3);
}

唯一の本当の制限は、IE8 以前または Opera でサポートされていないことです。 http://caniuse.com/#feat=calc

ただし、他のプロパティを利用することで、これを回避する方法があるかもしれません。パディングが問題の原因である場合は、box-sizing: border-box(必要に応じてプレフィックス) を使用します。要素がすべて同じ行に表示される必要がある場合はdisplay: table-cell、いくつかの用途があります。

http://jsfiddle.net/YFFcD/2/

div.container {
    display: table;
    width: 100%;
}

div.container div {
    display: table-cell;
}

<div class="container">
    <div>a</div>
    <div>b</div>
    <div>c</div>
</div>
于 2013-04-04T17:19:09.683 に答える
0

cssで実現できます。もちろん、特定の価格では、div にはブロックの動作やその他のレイアウト依存の状況がありません。

jsfiddle:例

HTML の例:

<body>
    <div class="minus100">
        <div>One third</div>
    </div>
</body>

CSS:

div.minus100 {
    position:fixed;
    /* or absolute; */
    top:0;
    left:50px;
    right:50px;
    bottom:0;
    background-color:blue;
}

div.minus100 div:first-child{ 
    width:33.3%;
    height:100%;
    color:#fff;
    background-color:navy;
}
于 2013-04-04T17:18:35.973 に答える