html - 如何用三个div分屏

标签 html css

如何通过以下需求实现三个div的分屏: - 主 div 应该覆盖整个屏幕 (100%x100%) - div 之后的子 div 应该覆盖主 div(每个子 div = 33%)

我试着按照下面的方式去做:

    <div style="width:100%; height :100%;  background-color:Lime;">
    sss
        <div style="width:100%; height:34%; background-color:Blue;">
        a
        </div>
        <div style="width:100%; height:33%; background-color:Gray;">
        b
        </div>
        <div style="width:100%; height:33%; background-color:Aqua;">
        c
        </div>        
    </div>

最佳答案

您需要将bodyhtml 的高度设置为100%。看这个fiddle .

关于html - 如何用三个div分屏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6582439/

相关文章:

html - 子元素自动宽度(大于父元素)

javascript - 溢出 :auto is not working on a BlackBerry device

javascript - 测试 phantomCSS 找不到 ResembleJs 容器

css - 页面刷新后,选项卡行在 Angular 应用程序中获得额外的空白

html - 跨多个容器使用 flex 订单属性

javascript - 由多个图像文件组成的响应式 map

javascript - 显示其他 div 时隐藏 div

html - 当我将鼠标悬停在图像上并使用 z-index 属性时,图像会闪烁吗?

javascript - jQuery 使用 anchor 的类名将 anchor 的 href 值动态设置为另一个 anchor 的 href 值

javascript - 在 Javascript 中为函数内的 CSS 文本设置样式