V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
Newyorkcity
V2EX  ›  问与答

请问 HTML5 中如何让 body 元素高度、宽度自动等于页面高度宽度?

  •  
  •   Newyorkcity · 2016-11-06 22:46:11 +08:00 · 15888 次点击
    这是一个创建于 2937 天前的主题,其中的信息可能已经有所发展或是发生改变。

    请问 HTML 中如何让 body 元素高度、宽度自动等于页面高度宽度? 很初级的一个问题....麻烦各位大佬了..谢谢

    
    .aclass{
    width: 100%;
    height: 100%;
    border: 5px solid red;
    }
    <body class="aclass">
    ...
    </body>
    
    

    最后显示的还是只有已经有内容的元素们一起占用的高度(不过宽度的话貌似不设置 height:100%也会自动化的 100%...我不知道为什么)
    另外如果在 body 元素的子元素中 width:30%,是不是取 body 宽度的 30%?
    谢谢

    15 条回复    2016-11-07 13:44:59 +08:00
    Newyorkcity
        1
    Newyorkcity  
    OP
       2016-11-06 22:48:26 +08:00
    另外请问如何获取一个页面的宽度和高度呢?(通过数字的形式展示给我看)
    谢谢
    suinia
        2
    suinia  
       2016-11-06 22:50:06 +08:00
    给 html 设置高度 html{height:100%}
    SourceMan
        3
    SourceMan  
       2016-11-06 22:50:33 +08:00 via iPhone
    html,body 都 100%写起来
    ByZHkc3
        4
    ByZHkc3  
       2016-11-06 22:53:19 +08:00   ❤️ 1
    每一个块级元素都会根据子元素占用的空间来调节宽高。
    第二个问题,是的。
    ByZHkc3
        5
    ByZHkc3  
       2016-11-06 22:54:17 +08:00
    @Newyorkcity css 无法获取页面宽高,得用 js
    Newyorkcity
        6
    Newyorkcity  
    OP
       2016-11-06 23:33:53 +08:00
    @suinia
    <pre>
    <code>
    <html {height:100%}>
    ...
    </html>
    </code>
    </pre>
    是这样吗?可是没有什么效果...
    @ByZHkc3
    感谢你的回答.
    那请问应该怎么只通过 HTML 和 CSS 实现让一个图片〈位于 main 元素内部,要考虑 header 和 footer 元素〉可以总显示在页面正中央呢?
    谢谢
    suinia
        7
    suinia  
       2016-11-07 00:00:23 +08:00 via iPhone   ❤️ 1
    看来你没有一点基础?这样咯. <html style="height:100%">...</html
    >
    yoa1q7y
        8
    yoa1q7y  
       2016-11-07 00:03:20 +08:00   ❤️ 1
    html, body {
    height: 100%;
    width: 100%;
    }
    honk
        9
    honk  
       2016-11-07 00:05:57 +08:00 via Android
    vw, vh
    Quaintjade
        10
    Quaintjade  
       2016-11-07 00:19:45 +08:00
    先看一下 HTML 和 CSS 的基础语法。
    “通过数字的形式展示给我看”,单 CSS 做不到。如果你只是自己看的话,可以按 F12 看。

    垂直居中是一个经常困扰初学者的问题,因为会牵涉到 display, position 等属性。

    顺带一提,现在 css 里面有新的单位: vw, vh, vmin, vmax
    scyuns
        11
    scyuns  
       2016-11-07 01:27:38 +08:00 via Android
    楼上的你们让开吧 我来上代码 保证兼容绝对等于浏览器宽高
    body{display:fiexd;top:0;right:0;left;0;bottom:0}
    兄弟们你们觉得这段 css 如何
    lslqtz
        12
    lslqtz  
       2016-11-07 01:34:44 +08:00
    用 js ,然后写进 css 。
    le720
        13
    le720  
       2016-11-07 09:28:17 +08:00
    vh , vw 适合你的需求
    Newyorkcity
        14
    Newyorkcity  
    OP
       2016-11-07 13:31:02 +08:00
    @yoa1q7y
    设置之后浏览器页面上出现可以上下滚动和左右滚动的功能..应该是成功了,可是为什么会存在滚动功能呢..
    另外 body height:100%我也用过但没有效果,是一定要加上 html height:100%么?
    谢谢
    yoa1q7y
        15
    yoa1q7y  
       2016-11-07 13:44:59 +08:00   ❤️ 1
    其实这些 100%都是相对数字,是要相对于父级才会有效的
    html 写 100%是为了和窗口相对
    body 写 100%是为了和 html 相对

    如果有滚动条出现,那显然是你 body 内的内容尺寸超过了窗口的显示区域
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2751 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 11:40 · PVG 19:40 · LAX 03:40 · JFK 06:40
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.