CSS：將寬度/高度設(shè)置為百分比減去像素我正在嘗試創(chuàng)建一些可重用的CSS類，以便在我的網(wǎng)站上實現(xiàn)更高的一致性和更少的混亂，而且我一直試圖標準化我經(jīng)常使用的一件事。我有一個容器<div>，我不想設(shè)置高度（因為它會根據(jù)網(wǎng)站的位置而有所不同），里面是一個標題<div>，然后是一個無序的項目列表，所有的CSS都應(yīng)用于他們。我想無序列表占用容器中剩余的房間<div>，知道頭部<div>是18px高大的。我只是不知道如何將列表的高度指定為“ 100%減去的結(jié)果18px”。我已經(jīng)在其他幾個背景下看過這個問題了，但我認為值得再次詢問我的具體案例。有沒有人在這種情況下有任何建議？
3 回答
瀟湘沐
TA貢獻1816條經(jīng)驗 獲得超6個贊
我意識到這是一篇舊帖子，但鑒于它沒有被建議，值得一提的是，如果您正在為符合CSS3的瀏覽器編寫，您可以使用calc：
height: calc(100% - 18px);
值得注意的是，并非所有瀏覽器當前都支持標準的CSS3 calc（）函數(shù)，因此可能需要實現(xiàn)特定于瀏覽器的函數(shù)版本，如下所示：
/* Firefox */
height: -moz-calc(100% - 18px);
/* WebKit */
height: -webkit-calc(100% - 18px);
/* Opera */
height: -o-calc(100% - 18px);
/* Standard */
height: calc(100% - 18px);
蕪湖不蕪
TA貢獻1796條經(jīng)驗 獲得超7個贊
我在你的幫助下解決了我的問題，調(diào)整了一點，因為我想要一個100％寬度100％高度（底部條的高度較少）并且身體沒有滾動（沒有黑客/隱藏滾動條）。
對于CSS：
html{
width:100%;height:100%;margin:0px;border:0px;padding:0px;
}
body{
position:relative;width:100%;height:100%;margin:0px;border:0px;padding:0px;
}
div.adjusted{
position:absolute;width:auto;height:auto;left:0px;right:0px;top:0px;bottom:36px;margin:0px;border:0px;padding:0px;
}
div.the_bottom_bar{
width:100%;height:31px;margin:0px;border:0px;padding:0px;}對于HTML：
<body><div class="adjusted"> // My elements that go on dynamic size area <div class="the_bottom_bar"> // My elements that goes on bottom bar (fixed heigh of 31 pixels) </div> </div>
這就是訣竅，哦，是的，我把div.adjusted的值放在底部而不是底部條高度，否則會出現(xiàn)垂直滾動條，我調(diào)整為最接近的值。
這種差異是因為動態(tài)區(qū)域中的一個元素是添加了一個額外的底洞，我不知道如何擺脫...它是一個視頻標簽（HTML5），請注意我把這個視頻標簽與此css（所以它沒有理由制作一個底洞，但確實如此）：
video{
width:100%;height:100%;margin:0px;border:0px;padding:0px;
}目標：有一個視頻占用100％的瀏覽器（并在調(diào)整瀏覽器大小時動態(tài)調(diào)整大小，但不改變寬高比）減去我用于帶有一些文本，按鈕等的div的底部空間（和驗證器） w3c＆css當然）。
編輯：我找到了原因，視頻標簽就像文本，而不是塊元素，所以我用這個css修復(fù)它：
video{
display:block;width:100%;height:100%;margin:0px;border:0px;padding:0px;
}請注意display:block;視頻標簽。
添加回答
舉報
0/150
提交
取消