html – CSS垂直填充屏幕50％50％

概述参见英文答案 > Make a div 100% height of the browser window                                    30个 适用于大多数浏览器的CSS是什么？ > 2 Divs – 50％和50％垂直填充整个屏幕. >每个div水平分别为50％和50％,以填充1600px宽度. <!-- TOP 50% --><div class=" 参见英文答案 > Make a div 100% height of the browser window30个

适用于大多数浏览器的CSS是什么？

> 2 divs – 50％和50％垂直填充整个屏幕.
>每个div水平分别为50％和50％,以填充1600px宽度.

<!-- top 50% --><div >   <div >img</div>   <div >txt</div></div><!-- BOT 50% --><div >   <div >text</div>   <div >img</div></div>

解决方法 目标：

你想要一个2 x 2网格的盒子.每个盒子的高度和宽度应为窗口的50％.这实际上比你想象的要容易得多.你不需要.left或.right,你不需要.top .bot.您只需要一个名为.row的类.

编辑：您在评论中提到您希望宽度固定为1600px;我们只需要为身体增加宽度.

码

HTML：

<!-- top 50% --><div >   <div>img</div>   <div>txt</div></div><!-- BOT 50% --><div >   <div>text</div>   <div>img</div></div>

CSS：

HTML,body {    padding:0;    margin:0;    height:100%;}body {    wIDth:1600px;}.row {    wIDth:100%;    height:50%;}.row div {    wIDth:50%;    height:100%;    float:left;}

截图

这是来自下面的示例,但我添加了颜色以便于查看.

编辑：小提琴已更改为包含宽度.我的截图是在宽度之前,来演示.由于固定宽度,它看起来会更宽.

工作实例：

总结

以上是内存溢出为你收集整理的html – CSS垂直填充屏幕50％50％全部内容，希望文章能够帮你解决html – CSS垂直填充屏幕50％50％所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。