如何使用CSS

Question

我正在使用CSS媒体查询构建响应式网站（不使用任何框架，如bootstrap，Foundation等）。那么网站对于宽屏幕分辨率1366 * 768工作正常，但是当我以1280 * 1024的屏幕分辨率打开网页时，页面下面留下了这么多空间。我还将每个部分的高度定义为100vh。

对于屏幕分辨率1366 * 768

对于屏幕分辨率1280 * 1024

如何显示内容以覆盖整个页面高度，以便删除高度超过768像素的屏幕的空白区域？

Answer 1

如果您想缩放特定高度的内容，可以使用def fnc(X): return (X[0] - X[1]) ** 2 和fig = plt.figure() ax = fig.add_subplot(111, projection='3d') x = y = np.linspace(-5,5,100) X, Y = np.meshgrid(x, y) Z = fnc1([np.linspace(-5,5,100) , np.linspace(-6,6,100)]) ax.plot_surface(X, Y, Z) ax.set_xlabel('X Label') ax.set_ylabel('Y Label') ax.set_zlabel('Z Label') plt.show()

的媒体查询

首先是HTML

transform: scale();

然后是CSS

max-height:

我建议还将内容与<div class="wrapper"> <div class="main"> <h2>Hi my name is Shashank</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, fugiat, aut, repellendus architecto repellat at soluta perspiciatis suscipit quia error tempora ea aliquid saepe beatae id excepturi cupiditate esse ex.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, fugiat, aut, repellendus architecto repellat at soluta perspiciatis suscipit quia error tempora ea aliquid saepe beatae id excepturi cupiditate esse ex.</p> </div> </div> 的html和正文标记以及html, body { background: #333; padding: 0px; margin: 0px; color: #222222; height: 100%; width:100%; display: table; } .wrapper { margin: 0 auto; position: relative; width: 100%; display: table-cell; vertical-align: middle; } .main { -moz-border-radius: 6px / 6px; -webkit-border-radius: 6px 6px; border-radius: 6px / 6px; padding: 20px; background: #4694e8; width:300px; margin: auto; transition: 0.3s; } /* When height is 400 or less scale the content to 0.7 */ @media screen and (max-height: 400px) { body { background: #444; } .main { -ms-transform: scale(0.7, 0.7); -webkit-transform: scale(0.7, 0.7); transform: scale(0.7, 0.7); } } /* When height is 500 or more scale the content to 1.3 */ @media screen and (min-height: 500px) { body { background: #222222; } .main { -ms-transform: scale(1.3, 1.3); -webkit-transform: scale(1.3, 1.3); transform: scale(1.3, 1.3); } } 与display:table一起放在包装器div中

以下是演示：https://jsfiddle.net/da2ds0nj/2/

我希望这可以帮到你，请原谅我的英语。

Answer 2

最简单的解决方案是使用flexbox - 您也可以获得good coverage。

.container {
    display: flex;
    align-items: center;
}

类似

<div class="container">
    <div><!-- content --></div>
</div>

编辑：这是为了垂直居中 - 我可能误解了你想要完成的事情。

如果您希望内容垂直填充空间，可以尝试以下内容：

.container {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: space-around;
}

并将其与子项上的flex-basis组合，为您想要更大的孩子定义基线。可以找到一个很好的flex资源here。

Answer 3

无法将内容设置为填充百分比高度而不是设置数字，如下所示：

content {
height: 70%;
}