CSS: Setting width/height as Percentage minus pixels

I've seen this question asked in a couple other contexts on SO, but I thought it would be worth asking again for my particular case. I'm trying to create some re-usable CSS classes for more consistency and less clutter on my site, and I'm stuck on trying to standardize one thing I use frequently.

I have a container div that I don't want to set the height for (because it will vary depending on where on the site it is), and inside it is a header div, and then an unordered list of items, all with CSS applied to them. It looks a lot like this:

I want the unordered list to take up the remaining room in the container div, knowing that the header div is 18px tall. I just don't know how to specify the list's height as "the result of 100% minus 18px". Does anyone have any advice in this situation?

---

I realise this is an old post, but given that it hasn't been suggested it is worth mentioning that if you are writing for CSS3-compliant browsers, you can use calc :

height: calc(100% - 18px);

It's worth it to note that not all browsers currently support the standard CSS3 calc() function, so implementing the browser specific versions of the function may be required like the following:

/* Firefox */
height: -moz-calc(100% - 18px);
/* WebKit */
height: -webkit-calc(100% - 18px);
/* Opera */
height: -o-calc(100% - 18px);
/* Standard */
height: calc(100% - 18px);

---

For a bit of a different approach you could use something like this on the list:

position: absolute;
top: 18px;
bottom: 0px;
width: 100%;

This works as long as the parent container has position: relative;

---

I use Jquery for this

function setSizes() {
   var containerHeight = $("#listContainer").height();
   $("#myList").height(containerHeight - 18);
}

then I bind the window resize to recalc it whenever the browser window is resized (if container's size changed with window resize)

$(window).resize(function() { setSizes(); });

链接地址: http://www.djcxy.com/p/5090.html

上一篇: “超级”在Python中做什么？

下一篇: CSS：设置宽度/高度为百分比减去像素