问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

布局 页面设置百分比 子元素如何设置外边距？

头像
冯子瀚
    111
    头像
    清蒸不是水煮
      3.1k21026
      新手上路，请多包涵

      布局时，当父元素设置定值时，子元素没有出现问题；当父元素设置百分比或者给页面设置高度定值时，子元素无法设置百分比。耦合度太高了：

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圣杯布局</title>
    <style>
        body {
            min-width: 1000px;
            margin: 0;
        }
        header,footer {
            width: 600px;
            height: 50px;
            background-color: cyan;
            margin: 0 auto;
            border: 10px solid #ffff00;
            text-align: center;
        }
        .col {
            width: 600px;
            height: 500px;
            border:10px solid #000000;
            margin: 0 auto;
            text-align: center;
        }
        .left {
            width: 100px;
            height: 500px;
            background-color: lime;
            float: left;
            margin-top: -500px;
        }
        .center {
            height: 500px;
            background-color: mediumorchid;
            box-sizing: border-box;
            padding: 0 100px;
        }
        .right {
            width: 100px;
            height: 500px;
            background-color: red;
            float: right;
            margin-top: -500px;
        }
    </style>
</head>
<body>
<header>我是顶部</header>
<div class="col">
    <div class="center">我是中间</div>
    <div class="left">我是左部</div>
    <div class="right">我是右部</div>
</div>
<footer>我是底部</footer>
</body>
</html>
      html5css
      阅读 2.7k
      1 个回答
      得票最新
      头像
      程序媛花花
        1.7k53756

        一般header和footer 是高度固定的，屏幕充满的话可以选择绝对定位，子元素就可以使用百分比了，楼主只给了固定高度的样式，没有给使用百分比设置的样式，怎么修改还是要看具体情况

        <meta charset="UTF-8">
<title>圣杯布局</title>
<style>
    body {
        margin: 0 auto;
        position: relative;
        width: 600px;
    }

    header, footer {
        width: 600px;
        height: 50px;
        background-color: cyan;
        margin: 0 auto;
        border: 10px solid #ffff00;
        text-align: center;
    }

    header {
        position: absolute;
        top: 0;
    }

    footer {
        position: absolute;
        bottom: 0;
    }
    .col {
        position: absolute;
        top: 70px;
        bottom: 70px;
        width: 600px;
        border: 10px solid #000000;
        margin: 0 auto;
        text-align: center;
    }

    .left {
        width: 100px;
        height: 100%;
        background-color: lime;
        float: left;
        margin-top: -500px;
    }

    .center {
        height: 500px;
        background-color: mediumorchid;
        box-sizing: border-box;
        padding: 0 100px;
    }

    .right {
        width: 100px;
        height: 500px;
        background-color: red;
        float: right;
        margin-top: -500px;
    }
</style>
</head>
<body>
<header>我是顶部</header>
<div class="col">
    <div class="center">我是中间</div>
    <div class="left">我是左部</div>
    <div class="right">我是右部</div>
</div>
<footer>我是底部</footer>
</body>
</html>
        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题