具有相等高度（最小为100％的视口）和圆角的多列布局 [英] Multiple-Column-Layout with equal height (minimum 100% of the viewport) and rounded corners

问题描述

这是我在stackoverflow的第一个问题做了大量的研究没有相应的成功： - （。

我努力的任务做一个三 - 列布局与不同的内容，从而每列的内容，因此不同的高度，但列应该是相同的高度，所以，他们的背景颜色到底部，所以，我发现这样的例子

如何制作在等高列上的圆角

当然是这一个

http://matthewjamestaylor.com/blog/equal-height-columns-cross- browser-css-no-hacks

但是他们不会做的，因为他们使用overflow：hidden，做一个假的高度比所以当然，每一列的背景颜色往下到底部和进一步。这很好，但还不够，因为我必须使用圆角来形成内容元素的背景。它应该像下面地址上的图片：

http://www.addorange.de/uploads/3columns_rounded_corners.jpg （抱歉，我不允许张贴图片： - （）

谢谢你，

Christian

解决方案

两种解决方案：

• 您可以使用 display：table-cell 为您的三个列


• 使用javascript调整它们的大小

this is my first question on stackoverflow after doing a lot of research without the appropriate success :-(.

I'm struggling with the task to do a three-column-layout with various amount of content and thereby differing height for each columns content. But the columns should be of same height, so that their background-color reaches down to the bottom. So, I found examples like this

How to make rounded corners on equal height columns

and of course this one

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

But they don't do the trick, as they use overflow:hidden and do a fake height pretty much longer than the page would ever be. So of course, the background-color of each column goes down to the bottom and further. That's fine, but not enough, as I do have to shape the content element's background with rounded corners. It should look like the image on following adress:

http://www.addorange.de/uploads/3columns_rounded_corners.jpg (sorry, I'm not allowed to post images yet :-()

Maybe anybody of you encountered a similar challenge to fix this by pure css.

Thank you,

Christian

解决方案

Two solutions:

• You can use display: table-cell for your three columns
• Resize them with javascript

这篇关于具有相等高度（最小为100％的视口）和圆角的多列布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！