固定 div 不超出屏幕右边缘答案

【问题标题】：Fixed div does not go beyond the screen's right edge固定 div 不超出屏幕右边缘
【发布时间】：2016-01-11 23:16:38
【问题描述】：

我有一个div，它的位置是fixed。问题是当div 向右移动时，它不会超出屏幕的右边缘。它调整自己的大小，使其宽度更小。当我给它一个固定的width 时，这不会发生。但我希望它具有定义max-width 的流体宽度。我不希望它通过定义right 粘在右边。我想定义左边的位置，让多余的离开屏幕。

你可以在这里看到问题：http://codepen.io/anon/pen/BjZppJ

点击示例中的div查看问题。

HTML 代码

<div> -- RANDOM TEXT HERE -- </div>

CSS 代码

div
{
  position: fixed;
  left: 0;
  top: 0;
  padding: 20px;
  max-width: 500px;
  background: rgba(112,66,102, .1);
}

div.right
{
  left: calc(100% - 300px)
}

【问题讨论】：

标签： css css-position

【解决方案1】：

将width: 100%; 添加到 div 中，这样做会始终尝试使其宽度达到其父级的 100%，但由于您设置了最大宽度，它不会完全到达那里。

$('div').click(function(){
  
  if($(this).hasClass('right'))
  {
    $(this).removeClass('right')
  }
  else
  {
    $(this).addClass('right')
  }
     
  
})

div
{
  position: fixed;
  left: 0;
  top: 0;
  padding: 20px;
  max-width: 500px;
	background: rgba(112,66,102, .1);
  width: 100%;
}

div.right
{
  left: calc(100% - 300px)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>as dfas dfa sdf asdfasd fsdf sdfasdfa sdfasdfasd fasdfa sdfa sdfasdfa sdfasdfa sdfsdf sd</div>

【讨论】：

【解决方案2】：

将width:100% 添加到div 的样式定义中就可以了。

默认为width:auto，对于具有固定位置的元素，它将尝试计算不会溢出窗口尺寸的宽度。

【讨论】：