overflow:auto横向出现滚动条

Question

html代码如下：

<div class="detail-wrapper clearfix">
    <div class="detail-main">
      <div>11111</div>
      <div>11111</div>
    </div>
</div>

css代码如下：

.detail
      overflow: auto
      position: fixed
      top: 0
      left: 0
      width: 100%
      height: 100%
      background-color: rgba(7, 17, 27, .7)
      z-index: 10
      .detail-wrapper
        min-height: 100%
        width: 100%
        .detail-main
          padding-top: 1.28rem
          padding-bottom: 1.28rem
          color: #ffffff

width设置为100%，或者不设置宽度，横向都会出现滚动条，怎么才能使宽度就是屏幕的宽度，横向不出现滚动条啊

Answer 1

滚动条是因为里面的内容超过容器宽, 可以改变内部布局, 或者设置x方向超出隐藏

overflow-x: hidden;
overflow-y: auto;

Answer 2

宽度等于屏幕的宽度：
var w = $(window).width()
$('元素').css({
'width':w
})
横向禁止出现滚动条：
overflow-x: hidden;

Answer 3

设置成 overflow: auto;，内容溢出了，肯定会出现滚动条啊。

杜绝出现滚动条的方法：

1. 内容要设置在容器宽度以内。
2. overflow-x: hidden; overflow-y: hidden; 或 overflow: hidden，可以隐藏溢出内容。