Question

我有以下内容：

＆＃13;

.container {
  width: 100%;
  height: 100%;
  position: relative;
}

.contents {
  position: absolute;
  float: right;
  bottom: 0;
  width: 100%;
  top: calc(100% - 37px);
  overflow-x: auto;
  overflow-y: hidden;
}

＆＃13;

<div class='container'>
  <div class='contents'>
     The contents of the 'contents' div might vary its width, not its height
  </div>
</div>

＆＃13;

如果contents div溢出，则水平滚动不会显示。垂直滚动仍然存在，隐藏，但在那里，这正是这个div滚动，垂直，而不是水平。我在这里缺少什么？

Answer 1

我修改了你的例子。

显示块，孩子需要比父母更多。不确定位置是绝对的，但在这里似乎没有必要。

＆＃13;

.container {
   width:530px;
    height:210px;
    border: 13px solid #bed5cd;
    overflow-x: scroll;
    overflow-y: hidden;
}

.contents {
  display: inline-block;
   float:left;
   height:120px;
   width: 1000px;
   display: block;
}

＆＃13;

<div class='container'>
   <div class='contents'>
      The contents of the 'contents' div might vary its width, not its height
      The contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' di
      s' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents ofs' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents ofs' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents ofs' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents ofs' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents ofv might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its height
   </div>
</div>

＆＃13;

Answer 2

首先：使用百分比宽度使div相对于父级，容器大小写，正文和html。

对于容器div是scrollabe，你必须做类似的事情：

body {
    min-width: 120%;
}

div在溢出时不会水平滚动

2 个答案: