我想使用Semantic UI
制作http://purecss.io/layouts/blog/之类的布局你能告诉我怎么做吗？
这是我的代码
<!DOCTYPE html>
<html>
<head>
<title>Blog Page</title>
<link rel="stylesheet" href="assets/semantic.min.css">
</head>
<body>
<div class="ui padded grid">
<div class="four wide blue column">
<div class="container">
<h1 class="ui header">A SAMPLE BLOG</h1>
<p>Creating a blog layout using Semantic</p>
</div>
</div>
<div class="eight wide column">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in purus et diam lacinia luctus gravida id nulla. Aliquam vehicula velit ac nisl ornare, eget lobortis dolor facilisis. Vestibulum in vulputate augue, a laoreet lacus. Vivamus eleifend in lectus eget egestas. In ut ligula a risus imperdiet volutpat. Vestibulum hendrerit odio diam, at placerat leo condimentum sit amet. Aenean imperdiet scelerisque mi, non tincidunt felis posuere nec. Quisque venenatis tempor urna, eget faucibus lectus ornare at. Phasellus sed turpis nibh. Vivamus rhoncus massa in ex volutpat, sit amet sagittis dolor viverra. Nulla nulla sapien, suscipit et ligula id, eleifend mollis lectus.
Nunc luctus rutrum laoreet. Ut eleifend vestibulum rhoncus. Sed sit amet ultrices tellus. Integer eleifend tortor eleifend pharetra tempor. Mauris sapien felis, maximus a tellus eu, gravida hendrerit mauris. Maecenas ullamcorper libero sit amet neque mattis, vel venenatis risus pulvinar. Proin posuere tincidunt pulvinar.
Nam vel lectus tincidunt, posuere velit vel, dictum sem. Aliquam pulvinar urna neque, id ultricies orci varius sit amet. Nam ante dui, mollis in dignissim eu, lobortis a odio. Cras nec viverra neque, id porttitor purus. Ut tristique ex ut lectus scelerisque porttitor. Fusce feugiat vulputate orci eget convallis. Nulla lacus nisl, pulvinar eu libero id, mollis egestas nunc. Curabitur dictum tempor commodo. Nam erat diam, feugiat sit amet cursus et, rutrum at lorem. Nunc condimentum dui risus, vel maximus lectus consectetur sit amet. Morbi porta pharetra molestie.
Integer id convallis neque, at consectetur ligula. Integer eu luctus mi, nec scelerisque neque. Donec in nisl rutrum dui scelerisque luctus nec venenatis mi. Proin vehicula sed nisl at porta. Sed fringilla lacus nibh, vitae iaculis eros rutrum non. Duis iaculis dolor quis sapien ornare, eu ultrices nunc ultricies. Quisque dignissim hendrerit ultricies. Suspendisse eget tellus ac urna mollis viverra. Sed ac tellus scelerisque, congue lorem a, mollis velit. Praesent hendrerit ligula mi, eget gravida enim pharetra eu. Vestibulum varius erat ut commodo congue.
In scelerisque consectetur orci, eu dignissim tortor scelerisque sed. Sed lacinia urna at tincidunt efficitur. Ut porttitor mauris a neque volutpat sagittis. Proin sagittis gravida metus quis dignissim. Proin eleifend ultrices est, id vulputate ipsum vulputate in. Suspendisse libero orci, pretium ac erat in, pretium fringilla arcu. Etiam lobortis sit amet tellus eget tempus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed porttitor ante at purus vulputate dictum.</div>
</div>
</body>
</html>
但是，柱高不会占据高度的100％。
我希望像purecss布局一样修复它。 请帮我。 screenshot http://i60.tinypic.com/dniv0g.png
答案 0 :(得分：2)
为了使列伸展到页面高度的100％，您需要将其所有父级高度设置为100％。因此，您需要将根元素html高度设置为100％。
我建议您使用自定义类来定位它们。
html,
body,
.grid,
.column {
min-height: 100%;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.0.7/semantic.min.css" rel="stylesheet" />
<!DOCTYPE html>
<html>
<head>
<title>Blog Page</title>
<link rel="stylesheet" href="assets/semantic.min.css">
</head>
<body>
<div class="ui padded grid">
<div class="four wide blue column">
<div class="container">
<h1 class="ui header">A SAMPLE BLOG</h1>
<p>Creating a blog layout using Semantic</p>
</div>
</div>
<div class="eight wide column">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in purus et diam lacinia luctus gravida id nulla. Aliquam vehicula velit ac nisl ornare, eget lobortis dolor facilisis. Vestibulum in vulputate augue, a laoreet lacus. Vivamus eleifend
in lectus eget egestas. In ut ligula a risus imperdiet volutpat. Vestibulum hendrerit odio diam, at placerat leo condimentum sit amet. Aenean imperdiet scelerisque mi, non tincidunt felis posuere nec. Quisque venenatis tempor urna, eget faucibus
lectus ornare at. Phasellus sed turpis nibh. Vivamus rhoncus massa in ex volutpat, sit amet sagittis dolor viverra. Nulla nulla sapien, suscipit et ligula id, eleifend mollis lectus. Nunc luctus rutrum laoreet. Ut eleifend vestibulum rhoncus. Sed
sit amet ultrices tellus. Integer eleifend tortor eleifend pharetra tempor. Mauris sapien felis, maximus a tellus eu, gravida hendrerit mauris. Maecenas ullamcorper libero sit amet neque mattis, vel venenatis risus pulvinar. Proin posuere tincidunt
pulvinar. Nam vel lectus tincidunt, posuere velit vel, dictum sem. Aliquam pulvinar urna neque, id ultricies orci varius sit amet. Nam ante dui, mollis in dignissim eu, lobortis a odio. Cras nec viverra neque, id porttitor purus. Ut tristique ex
ut lectus scelerisque porttitor. Fusce feugiat vulputate orci eget convallis. Nulla lacus nisl, pulvinar eu libero id, mollis egestas nunc. Curabitur dictum tempor commodo. Nam erat diam, feugiat sit amet cursus et, rutrum at lorem. Nunc condimentum
dui risus, vel maximus lectus consectetur sit amet. Morbi porta pharetra molestie. Integer id convallis neque, at consectetur ligula. Integer eu luctus mi, nec scelerisque neque. Donec in nisl rutrum dui scelerisque luctus nec venenatis mi. Proin
vehicula sed nisl at porta. Sed fringilla lacus nibh, vitae iaculis eros rutrum non. Duis iaculis dolor quis sapien ornare, eu ultrices nunc ultricies. Quisque dignissim hendrerit ultricies. Suspendisse eget tellus ac urna mollis viverra. Sed ac
tellus scelerisque, congue lorem a, mollis velit. Praesent hendrerit ligula mi, eget gravida enim pharetra eu. Vestibulum varius erat ut commodo congue. In scelerisque consectetur orci, eu dignissim tortor scelerisque sed. Sed lacinia urna at tincidunt
efficitur. Ut porttitor mauris a neque volutpat sagittis. Proin sagittis gravida metus quis dignissim. Proin eleifend ultrices est, id vulputate ipsum vulputate in. Suspendisse libero orci, pretium ac erat in, pretium fringilla arcu. Etiam lobortis
sit amet tellus eget tempus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed porttitor ante at purus vulputate dictum.</div>
</div>
</body>
</html>