HTML 和 CSS - 正文未完全适应内容？

问题描述 投票：0回答：1

我试图创建页面效果，就像您最喜欢的文字处理器中的新文档一样。

如果将以下内容粘贴到 HTML 文件中并查看它（对我来说，在最新的 Chrome 中）：

<!DOCTYPE html>
<html>
    <head>
        <title>Page Test</title>
        
        <style>
            body, html { 
                margin: 0px ; 
                background-color: darkgrey ; 
                
            }
            
            .page { 
                position: absolute ; 
                background-color: white ; 
                width: 2970px ; 
                height: 2100px ; 
                margin: 16px ; 
                
            }

        </style>
        
    </head>

    <body>
        <div class="page"></div> 
            
    </body>
    
</html>

您确实看到左侧和顶部的灰色边距 - 并且您会看到滚动条。但如果你完全向右或完全向下滚动......你就不会得到右侧和底部的灰色边距。

我以为这是因为滚动条隐藏了它，但即使有 40 像素的边距，你仍然看不到它的碎片。

我什至尝试过不使用 

position: absolute
，将其保留为全角 
div
，以防绝对定位发生一些有趣的事情......但没有乐趣。

我希望正文能够适应内容、边距等等。我是否误解了它的工作原理？

html css scrollbar margin document-body
1个回答
0
投票

如果其他人遇到此问题，解决方法 - 如果您知道内容的大小（在我的例子中，我将页面 div 设为固定大小） - 就是为正文指定固定大小。

我只能猜测它不认为边距是需要适应的内容的一部分。

请注意，如果您将页面 div 包装在另一个 div 中（通常会扩展以包含这些边距），但不给该包装 div 固定大小或正文，您会遇到同样的问题 - 右侧和底部边距被切掉.

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.