如何在不滚动的情况下将flex容器全部保存在一个页面中
如何在不滚动的情况下将flex容器全部保存在一个页面中
提问于 2019-05-06 00:59:57
我正在创建一个网页，需要显示一些电影封面在一个单一的页面，没有滚动它，因为它将被展示。问题是，我想让内容调整大小，而不是使网页可滚动。我还需要支持n个电影(它们是相关的)。我试过两次使用flexbox，但都不起作用。另外，我使用的是tailwindcss css框架，但我不认为这是一个问题，因为它只是以类的形式存在的css……
<html class='h-full m-0 p-0'>
<head>
<link href="https://unpkg.com/tailwindcss@next/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class='h-full m-0 p-0'>
<div class='mx-10 mt-10 flex content-center items-center'>
<div class='flex flex-wrap'>
<!-- iterate over every movie -->
<div class='m-2 relative flex-grow h-full' style='flex-basis: 20%'>
<span class='px-2 py-1 rounded-full bg-blue-500 text-white absolute z-0' style='top: -0.5rem; right: -0.5rem'>0</span>
<img src='https://images.unsplash.com/photo-1525604803468-3064e402d70c' class: 'w-full' />
<span class='w-full opacity-75 bg-black text-white py-1 absolute z-0 inset-x-0 bottom-0 text-center px-2'>title</span>
</div>
<!-- end -->
</div>
</div>
</body>
</html>
编辑:我添加了一个完整的示例(带有来自unsplash的示例图像)，我希望它看起来是什么样子。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-05-06 03:58:48
我不认为没有JavaScript就没有办法做你所要求的事情。在下面的示例中，我使用CSS来保持封面的比例，并使用JavaScript来计算防止内容垂直滚动的最大宽度。
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
let numCovers = 10;
let coverList = document.querySelector(".cover-list");
// this function determines what percentage of the cover-list's width
// each cover should take up. It will maximize how large they can be
// without making the total grid size larger than cover-list.
// This should prevent scrolling.
function getBasis() {
let ratio = 1.35; // height/width
let width = coverList.clientWidth;
let height = coverList.clientHeight;
// this loop is really slow, you may want to find a faster way
let col = 0;
let accWidth, accHeight, numRows;
do {
col++;
if (col > numCovers) {
// maximize height
return (height / ratio) + "px";
}
accWidth = width / col;
accHeight = accWidth * ratio;
numRows = Math.ceil(numCovers / col);
} while (accHeight * numRows > height);
return (100 / col) + "%";
}
function generateCovers() {
// clear existing covers
coverList.innerHTML = "";
let basis = getBasis();
for (let i = 0; i < numCovers; i++) {
let cover = document.createElement("div");
cover.classList.add("cover");
cover.style.flexBasis = basis;
let inner = document.createElement("div");
inner.classList.add("inner");
inner.style.backgroundColor = getRandomColor();
cover.append(inner);
coverList.append(cover);
}
}
let numCoversInput = document.querySelector("#num-covers");
numCoversInput.addEventListener("change", function() {
numCovers = Math.min(Math.max(this.value, 1), 500);
this.value = numCovers;
generateCovers();
});
generateCovers();
window.addEventListener("resize", function() {
let basis = getBasis();
coverList.querySelectorAll(".cover").forEach(function(el) {
el.style.flexBasis = basis;
});
});body {
/* set margin to computable value for cover-list calcs */
margin: 5px;
}
#controls {
height: 25px;
}
.cover-list {
/* account for margin and controls with calc */
width: calc(100vw - 10px);
height: calc(100vh - 35px);
/* use flex so the content will wrap as desired */
display: flex;
flex-wrap: wrap;
align-content: start;
}
.inner {
/* padding percentages are based on width, so setting
the height to 0 and padding-bottom to a percentage
allows us to maintain a ratio */
width: 100%;
height: 0;
padding-bottom: 135%;
}<div id="controls">
<label>
Number of covers: <input id="num-covers" type="number" value="10" min="1" max="500"/>
</label>
</div>
<div class="cover-list">
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55994347
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号