课程: Advanced Responsive Layouts with CSS Flexbox

今天就学习课程吧！

今天就开通帐号，24,700 门业界名师课程任您挑！

What is the holy grail layout?

What is the holy grail layout? - CSS教程

课程: Advanced Responsive Layouts with CSS Flexbox

开始一个月试用 购买团队方案

What is the holy grail layout?

“

- In web design, there's this layout that's referred to as the Holy Grail. It's called the Holy Grail because it's a great idea, but up until now, it's been pretty much impossible to actually attain. The Holy Grail layout looks something like this. You have a header that spans the full width of the screen. Then you have a main content area that also spans the full width of the screen, but what makes this a Holy Grail layout is that there's several columns within this main content area, and all of these columns have the same height. On the bottom, we also have a footer that again spans the full width of the screen, and if you changed a content within any one of these columns, the other two columns will increase in height as well. Now, if you've ever worked with CSS columns before, you know that it's almost impossible to get columns to have equal heights using only CSS. To make the Holy Grail layout happen, you would either have to use JavaScript, or use some really convoluted CSS to…

内容