html - 按百分比调整表格行不起作用

标签 html

为什么尺寸根本没有改变?我的理想目标是让第一行占 70%,第二行占 30%。任何建议将不胜感激

<html>
<body style="position:fixed; top:0px; left:0px;bottom:0px; right:0px;  margin:0px;">
    <div style='display : table; width : 100%; height : 100%'>
        
        <div style='display : table-row; width : 100%; height : 10%;'>
            <div style="height:100%; width:100%; border:solid; display : table-cell;">
                blah
            </div>
        </div>
        
        <div style='display : table-row; width : 100%; height : 50%;'>
            <div style="height:100%; width:100%; border:solid; display : table-cell;">
                hah
            </div>
        </div>
        
    </div>
</body>
</html>

最佳答案

试试这个代码..

示例链接在这里:FIDDLE

HTML 代码:

<html>
<body style="position:fixed; top:0px; left:0px;bottom:0px; right:0px;  margin:0px;">
    <div style='display : table; width : 100%; height : 100%'>

        <div style='display : table-row; width : 100%; height : 70%;'>
            <div style="height:70%; width:100%; border:solid; display : table-cell;">
                blah
            </div>
        </div>

        <div style='display : table-row; width : 100%; height : 30%;'>
            <div style="height:30%; width:100%; border:solid; display : table-cell;">
                hah
            </div>
        </div>

    </div>
</body>
</html>

希望这段代码对您有所帮助,如果您有任何疑问,请告诉我...

关于html - 按百分比调整表格行不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21901027/

相关文章:

javascript - Node.js 和 express 无法使用简单的 Bootstrap 表单发布/出错

javascript - 无法在直播网站中播放 youtube 视频

javascript - Html CSS 表单不显示单选按钮

javascript - firefox 浏览器后退按钮不刷新页面

html - 如何对齐 Facebook 和 Tweet 按钮?

javascript - 如果我单击复选框,则尝试阻止 jQuery 触发 table tr onclick 事件

javascript - 从左到右循环移动背景图像

html - float 周围缩进的 block 引用

javascript - JQuery:如何使用 jQuery 检测移动宽度并将我的 css 更改为它?

html - 如何在CSS中添加带像素的视口(viewport)宽度?