使Div的高度响应

我在响应式设计中遇到了一个非常大的问题。使Div的高度响应

我想用HTML和CSS设计Metro用户界面，并且我希望在差异设备中更改框高度。我使用宽度百分比。我知道它也可以用于身高。但如果我使用高度百分比，如果垂直缩小浏览器，高度会越来越小。

另一个问题是，如果一起使用多台显示器一起观看桌面，宽度将比高度大得多，所以这些盒子将具有较小的高度和较大的宽度。

有没有一种有效的方式来使我的情况下的响应网站？

注意：我不想有一个垂直滚动。

任何建议或经验，以有效的方式作出回应？谢谢

来源

2017-08-05 Parsa mhn

尝试这样的：

div { 
 
    /* 25% of viewport */ 
 
    height: 25vh; 
 
    width: 15rem; 
 
    background-color: #222; 
 
    color: #eee; 
 
    font-family: monospace; 
 
    padding: 2rem; 
 
}

<div>responsive height</div>

来源

2017-08-05 08:15:37

我告诉我使用的百分比，vh表示视口高度。这和我所做的一样。那我提到的其他情况呢？多个显示器？ –

开始vw以获得所需的height比例为小屏幕视图宽度。

然后，观看者超过一定width后 - 在我的例子1080px，引入固定height于使用media query的元素。

这使该元素与小型和额外的，EXTRA宽屏幕和观众的垂直尺寸很好地工作不会有它

#logo { 
 
    height: 26vw; 
 
    width: auto; 
 
} 
 

 
@media screen and (min-width: 1080px) { 
 
    #logo { 
 
    height: 300px; 
 
    } 
 
}

<img id="logo" src="https://s.w.org/about/images/logos/wordpress-logo-notext-rgb.png">

来源

2017-08-05 08:45:10

谢谢，但我的问题是关于身高，我在我的问题中提到它 –

@Parsamhn同样的想法仍然适用。你可以用'vw'单位设置'height'。我编辑了这个例子。 –

非常感谢，但如果屏幕宽度是3600和高度980，那么我的盒子宽度会比它的高度大得多。它可以吗？任何建议？另一个问题是如果有人从高处收缩浏览器（这些框会缩小），那么这又如何呢？ –

任何影响

*{ 
 
    margin:0; 
 
    padding:0; 
 
    } 
 
.side-box { 
 
       background:red; 
 
       width:250px; 
 
       height:100vh; 
 
       }

<div class="side-box"> 
 
    </div>

来源

2017-08-05 09:29:36

使Div的高度响应

回答

相关问题