“100％”的DIV宽度在页面右端滚动

我有一个非常简单的布局，带有2个DIVS：一个固定宽度的左侧栏和一个右侧区域，占据剩余宽度的100％。两者都是100％的高度，如果高度高于窗口高度，我希望正确的项目具有垂直滚动条。“100％”的DIV宽度在页面右端滚动

我的当前代码占用了整个浏览器窗口，但右侧的区域从右侧的浏览器可查看区域滚动，并且从来没有可见的垂直滚动条。

HTML：

<body> 
    <form id="Form2" runat="server"> 
     <div class="page"> 
      <div class="clear hideSkiplink"> 
       Left side stuff goes here.... 
      </div> 
      <div class="main"> 
       Right size stuff goes here.... 
      </div> 
     </div> 
    </form> 
</body>

CSS：

div.hideSkiplink 
{ 
    padding:20px; 
    background-color:#990000; 
    position:fixed; 
    top:0px; 
    left:0px; 
    width:249px; 
    height:100%; 
} 
div.main 
{ 
    padding: 10px; 
    margin: 0px; 
    background-color: #000000; 
    color: #ffffff; 
    position: fixed; 
    top: 0px; 
    left: 250px; 
    width: 100%; 
    height: 100%; 
}

来源

2011-06-06 pearcewg

我主要工作，感谢您的意见！我仍然希望能够有机会获得DIV禅师的帮助，让我走出去......行为有时候会很奇怪！ – pearcewg 2011-06-08 22:18:51

当你给的东西width:100%这意味着 '无论我的容器的宽度，我将具有相同的宽度' - 这并不意味着'我将占用100％的可用空间'

换句话说，假设您的父母DIV的宽度为300像素 - 如果您给孩子div width: 100% ，它将是300像素的100％。

你可以在这里做什么，因为你的左列是固定的宽度，是向右分区添加左边距。

div.left 
{ 
    width: 249px; 
} 

div.right 
{ 
    width: 100%; 
    margin-left: 249px; 
}

来源

2011-06-06 20:03:34 KOGI

另外值得注意的是宽度意味着内容宽度。它从那开始，然后为它添加填充，边框和边距。所以即使你在页面上有一个100％的div，如果有任何填充，它仍然会滚动屏幕。 – gtd 2011-06-06 20:04:57

@gtd是100％正确的。然而，你可以通过使用CSS的'box-sizing：border-box;'规则来解决这个问题。不过，[支持尚未满]（http://caniuse.com/#search=box-sizing） – KOGI 2014-02-06 22:53:25

而是具有更广阔的领域填补空间，为什么不只是做绝对定位的左边栏和主要内容<div>填充了整个页面，用padding-left在内容转移？

来源

2011-06-06 20:05:17 Blender

宽度为100％的div将填充它所在的容器。您的容器是页面宽度的100％。它没有考虑到你将它向右移动了250px，并且具有绝对定位。

你最好的选择：

.hideskiplink应该来的流量。主要后。浮动.hideskiplink到左边，给它一个宽度，然后给.main一个margin-left匹配.hideskiplink的宽度。

来源

2011-06-06 20:07:28

某些时候，您需要将CSS中正文中的页边距设置为0.

EG。

body {background-color:#000; margin-left:0px;}

默认情况下，某些浏览器在左侧有几个像素填充。

来源

2012-10-11 05:49:08 user1427806

我已经解决了我的问题，通过将最小宽度设置为“body”与该div内的内容宽度相同的值。

来源

2015-01-20 21:21:45 Jerome

“100％”的DIV宽度在页面右端滚动

回答

相关问题