HTML和CSS -布局问题(使用网格和flexbox)
HTML和CSS -布局问题(使用网格和flexbox)
提问于 2018-06-22 02:18:30
Codepen：https://codepen.io/pprunesquallor/pen/qKxvrX
我是一个玩网格和flexbox的初学者。
我希望文章元素(黄色)的高度仅为文本所需的长度(因此在本例中为cca的一半)，因此旁注元素(灰色)应具有相同的高度(取决于文章的高度)，并且可滚动。
提前谢谢你！！
html, body {
height: 100%;
}
body {
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"header"
"main"
"footer";
align-items: stretch;
}
header {
grid-area: header;
display: flex;
flex-direction: column;
background-color: lime;
}
header > h1 {
margin: 0;
background-color: brown;
}
nav {
display: flex;
flex-direction: row;
background-color: orange;
}
main {
grid-area: main;
display: flex;
flex-direction: row;
background-color: red;
}
article {
background-color: yellow;
}
aside {
width: 50%;
overflow: auto;
overflow-y: scroll;
background-color: grey;
}
footer {
grid-area: footer;
background-color: pink;
}<html lang="en">
<body>
<header>
<h1 id="title">Header Title</h1>
<nav>
<form style="display: inline" action="http://google.com" target="_blank">
<button>Link 1</button>
</form>
<form style="display: inline" action="http://google.com" target="_blank">
<button>Link 2</button>
</form>
<form style="display: inline" action="http://google.com" target="_blank">
<button>Link 3</button>
</form>
</nav>
</header>
<main id="main">
<article id="info">
<h2>Article Title</h2>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute <a id="link" href="" target="_blank">Link</a> irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean leo urna, porta ac interdum placerat, rhoncus vel lectus. Aenean consectetur condimentum augue fringilla elementum. Mauris vel fermentum nisi. Donec nec condimentum sapien. Donec feugiat consequat est ac hendrerit. Phasellus nec turpis ex. Vestibulum malesuada leo mauris. Proin posuere ultricies mauris, at varius lorem laoreet sed. Nam congue, arcu sed feugiat scelerisque, massa turpis convallis ante, eu lobortis orci leo et ex. Vivamus ut aliquet massa.
<br>
Curabitur placerat gravida est, eu rutrum metus suscipit sit amet. Mauris placerat nibh felis, sit amet semper dolor facilisis ornare. Proin ut ultrices nisl. Aliquam laoreet porttitor ex quis elementum. Nullam nibh metus, convallis nec lectus vel, sollicitudin malesuada diam. Quisque nec semper turpis. Etiam vel eros porta, tincidunt nisl at, luctus elit. Fusce tristique nulla pharetra sagittis fermentum. Duis eget pharetra dolor, sagittis venenatis purus. Sed volutpat nisl et turpis consectetur blandit. In nunc eros, vehicula eu augue non, vehicula varius arcu. Mauris ut est elementum, tempus tellus pharetra, pretium urna. Nunc hendrerit finibus enim at efficitur. Vestibulum sagittis dolor et vehicula feugiat.
</article>
<aside><h3>Aside</h3>
Quisque volutpat turpis eu turpis elementum placerat. Integer auctor venenatis turpis, sit amet accumsan mi sagittis a. In scelerisque tempor dolor, sit amet mattis mi accumsan porta. Integer lacinia lobortis est sit amet bibendum. Vivamus faucibus aliquet odio vel vestibulum. Proin sit amet accumsan eros, hendrerit posuere magna. Ut et odio ac velit congue tincidunt. Suspendisse quis ex egestas, facilisis turpis id, cursus neque. Donec vulputate urna vel nisl convallis, pellentesque egestas felis placerat. Curabitur sit amet odio eget ante porttitor convallis et tempus leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam tellus sem, pharetra ut odio id, lobortis volutpat sem. In dictum at eros at vulputate. Morbi vel dui non erat vehicula suscipit quis eu ante. Proin condimentum sem dui, at mollis justo sollicitudin quis. Duis hendrerit tempus felis.
<br>
Morbi eget libero tristique eros porta tincidunt in et eros. Fusce tincidunt sit amet leo eu gravida. Maecenas ac imperdiet magna. Nullam tincidunt ultricies dignissim. Sed placerat leo in libero dignissim, sit amet volutpat arcu posuere. Sed consectetur eu arcu eu pulvinar. Integer varius rutrum orci, ac maximus nibh laoreet in. Duis laoreet elit quis erat fermentum luctus. Aliquam sollicitudin id odio sit amet vehicula. Sed tempor id quam vel lobortis.
<br>
Duis accumsan, sem et suscipit dictum, enim magna ornare justo, condimentum vulputate eros felis at ex. Nulla facilisi. Nunc porttitor semper est, eget accumsan ex accumsan quis. Integer tincidunt dignissim nisl. Sed ultrices venenatis massa, sed maximus massa pharetra ac. Sed tempus tempus dolor id pulvinar. Donec rutrum, diam et condimentum sollicitudin, ex nulla faucibus quam, quis eleifend risus ante aliquam turpis.
</aside>
</main>
<footer>Footer</footer>
</body>
</html>
回答 2
Stack Overflow用户
发布于 2018-06-22 03:10:58
这能实现你想要的吗？https://codepen.io/anon/pen/OEZMwV
我只是添加了以下JS，向<aside>添加了一个id，并更改了#info的显示。
$("#aside").css({
'height': ($("#info").height() + 'px')
});Stack Overflow用户
发布于 2018-06-24 13:54:56
这是一支钢笔，我可以把它用在这里。
https://codepen.io/anon/pen/jKKvpb
基本上，根据您提供的HTML/CSS，您所要求的内容是不可能实现的。网格行将根据列中最高项的高度自动调整自身大小。由于<main>上的flex css，无法获取<article>元素的自然高度。
解决方法是在<article>元素周围添加一个包装器<div>。我用jQuery做了这件事，因为我很懒，但是你可能应该把它加到超文本标记语言中。我确实添加了一些css以使did的颜色相匹配。
下面是我的代码：
//wrap the article in a div
jQuery('#info').wrap('<div id="article-wrap"></div>');
//a function that gets the height of the article and sets the aside to the height of the article
function sizeMe() {
var height= jQuery('#info').height();
jQuery('#aside').css('height', height);
}
//run the function on page load
sizeMe();
//to make it responsive run the function if the page is resized.
jQuery(window).resize( function(){
sizeMe();
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50975214
复制相关文章
相似问题