顯示一個div寬度100％的利潤率

我想和利潤率顯示的可擴展div（width: 100%）...顯示一個div寬度100％的利潤率

這裏是我的代碼：

<div id="page"> 
    <div id="margin"> 
     "some content here" 
    </div> 
</div>

這裏是我的CSS代碼：

#page { 
    background: red; 
    float: left; 
    width: 100%; 
    height: 300px; 
} 

#margin { 
    background: green; 
    float: left; 
    width: 100%; 
    height: 300px; 
    margin: 10px; 
}

LIVE DEMO

來源

2012-11-10 Random78952

您可以使用下面的CSS來達到預期的效果：

#page { 
    background: red; 
    overflow: auto; 
} 

#margin { 
    background: green; 
    height: 280px; 
    margin: 10px 
}

來源

2012-11-10 14:26:45

非常感謝，它適用於所有瀏覽器 – Random78952

啊！訣竅是沒有寬度：在#margin上100％。 – MSC

完全刪除寬度似乎不是解決邊距和寬度功能組合問題的合適方法。 – user7733611

您可以使用calc() css函數（browser support）。

#page { 
    background: red; 
    float: left; 
    width: 100%; 
    height: 300px; 
} 

#margin { 
    background: green; 
    float: left; 
    width: -moz-calc(100% - 10px); 
    width: -webkit-calc(100% - 10px); 
    width: -o-calc(100% - 10px); 
    width: calc(100% - 10px); 
    height: 300px; 
    margin: 10px; 
}

或者，嘗試使用填充代替保證金和box-sizing: border-box（browser support）：

#page { 
    background: red; 
    width: 100%; 
    height: 300px; 
    padding: 10px; 
} 

#margin { 
    box-sizing: border-box; 
    background: green; 
    width: 100%; 
    height: 300px; 
}

來源

2012-11-10 14:23:14

這是一個偉大的！我一直在通過javascript :( –

）最好的解決方案是在現代瀏覽器中使用'calc（）'，而不支持'calc（）'的舊版瀏覽器使用JS代碼+ Modernizr。 –

Css函數？這聽起來不錯...但我使用鉻和鉻告訴我「無效的財產價值」......但爲什麼？ – Random78952

有時，最好反其道而行之，給家長div填充代替：

LIVE DEMO

我做了什麼w爲改變#page的CSS：

#page { 
    padding: 3%; 
    width: 94%; /* 94% + 3% +3% = 100% */ 

    /* keep the rest of your css */ 
    /* ... */ 
}

然後刪除margin從#margin

注：這也增加了3％，至頂部和底部的（所以6％的高度），這使得它一點點高於300像素 - 因此，如果您需要300像素，則可以執行類似padding:10px 3%;的操作，並將height:280px;更改爲再次添加300像素。

來源

2012-11-10 14:23:21 Andy

這是現在使用CSS進行計算的正確方法。這說明了您最終得到一個'div'結構的基本原理，該結構模仿您要評估的表達式的分析樹。 – eh9

對於只有不到用戶：

使用VukašinManojlović的很好的解決方案不起作用開箱因在LESS編譯期間，LESS執行+或 - 操作。一個解決方案是逃避LESS，使其不執行操作。

Disable LESS-CSS Overwriting calc()

@someMarginVariable = 15px; 

margin: @someMarginVariable; 
width: calc(~"100% - "@someMarginVariable*2); 
width: -moz-calc(~"100% - "@someMarginVariable*2); 
width: -webkit-calc(~"100% - "@someMarginVariable*2); 
width: -o-calc(~"100% - "@someMarginVariable*2);

或者可以使用一個混合，如：

.fullWidthMinusMarginPaddingMixin(@marginSize,@paddingSize) { 
    @minusValue: (@[email protected])*2; 
    padding: @paddingSize; 
    margin: @marginSize; 
    width: calc(~"100% - "@minusValue); 
    width: -moz-calc(~"100% - "@minusValue); 
    width: -webkit-calc(~"100% - "@minusValue); 
    width: -o-calc(~"100% - "@minusValue); 
}

來源

2014-06-11 15:18:18

的正確方法通過標準實現這一目標是：

#margin { 
    background: green; 
    height: 280px; 
    margin: 10px; 
    width: auto; 
    display: block; 
}

來源

2017-07-13 13:12:59 Tolly

顯示一個div寬度100％的利潤率

回答

相關問題