Question

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

您可以在此处查看问题：TraversableLike

单击示例中的<div> -- RANDOM TEXT HERE -- </div>以查看问题。

HTML 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)
}

CSS代码

E_NOTICE : type 8 -- Array to string conversion

Answer 1

将$('div').click(function(){ if($(this).hasClass('right')) { $(this).removeClass('right') } else { $(this).addClass('right') } })添加到div中，通过这样做，它总是会尝试100％它的父级宽度，但是因为你设置了最大宽度，所以它不会完全到达那里。

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>

// i grabbed this from here: https://github.com/jashkenas/backbone/blob/master/backbone.js#L1438
Backbone.ajax = function() {
  var xhr = Backbone.$.ajax.apply(Backbone.$, arguments);
  xhr.method = arguments[0].type; // <<------- this part is the most important
  return xhr;
};

var BaseModel = Backbone.Model.extend({
  initialize: function(options) {
    this.on('error', this.onError)
  },
  onError: function(model, xhr, options) {
    alert(xhr.method)
  }
});

var SomeModel = BaseModel.extend({url: '/someresource/'});

// HERE ARE THE TESTS - when you run it you will see 4 alerts (in no particular order since `alert()` is blocking)
try {
    (new SomeModel()).fetch()
} catch(e) {}
try {
    (new SomeModel()).save()
} catch(e) {}
try {
  (new SomeModel({id: 123})).save()
} catch(e) {}
try {
    (new SomeModel({id: 123})).destroy()
} catch(e) {}

Answer 2

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

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

固定div不会超出屏幕的右边缘

2 个答案: