固定的div不会超出屏幕的右边缘 [英] Fixed div does not go beyond the screen's right edge

问题描述

我有一个 div ，它有一个固定位置。问题是当 div 向右移动时，它不会超出屏幕的右边缘。它自己调整大小，使其宽度更小。这不会发生，当我给它一个固定的宽度。但我想让它有一个流体宽度与 max-width 定义。我不想让它通过定义 right 来坚持到正确的边缘。我想定义左边的位置，让剩余的部分走出屏幕。

I have a div which has a fixed position. The problem is when the div moves to the right it does not go beyond the screen's right edge. It resizes itself making its width smaller. This does not happen when I give it a fixed width. But I want it to have a fluid width with max-width defined. I do not want it to stick to the right edge by defining right. I want to define the left position and let the excess go out of the screen.

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

You can see the problem here: http://codepen.io/anon/pen/BjZppJ

code> div 在示例中查看问题。

Click on the div in the example to see the problem.

HTML CODE b
$ b

HTML CODE

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

CSS CODE

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

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

推荐答案

添加 width：100％; ，通过这样做，它总是尝试是它的父的宽度的100％，但是因为你设置的最大宽度，它不会得到那里。

Add width: 100%; to the div, by doing so it will always try to be 100% the width of it's parent, but since you set the max width, it will not quite get there.

$('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>

这篇关于固定的div不会超出屏幕的右边缘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！