Question

我知道，标题可能看起来不清楚，但我会尝试解释我有什么问题。我有2个div，一个高，一个很小，与第一个相比较。第一个将占据网站宽度的100％，因此它将始终可见。问题是我想看到2.一个。我希望它有点粘。这是我用我令人印象深刻的技能制作的图片:) 这些是我想要实现的情况： http://docs.sequelizejs.com/en/latest/docs/querying/#range-operators

这是我想避免的情况：

如果我的目标仍不明确，请告诉我:)

编辑：这是我的代码的演示：

<div class="row">
  <div class="col-xs-4 long">
  long
  </div>
  <div class="col-xs-8 short">
    <div class="row">
      <div class="col-xs-12 col-sm-6 shortLeft">
      short left
      </div>
      <div class="col-xs-12 col-sm-6 shortRight"> 
      short right
      </div>
    </div>
  </div>
</div>

.long{
  height: 1000px;
  background-color: red;
}
.shortLeft{
  background-color: green;
  height:50px;
}
.shortRight{
  background-color: blue;
  height:50px;
}
.short{
  border: 5px solid yellow;
}

假设您的屏幕高度为75px。在宽屏幕位置固定工作，因为50px小于75所以你可以看到整个内容。但是在屏幕较窄的情况下你会丢失一些内容 - 固定的位置不是解决方案:(

Answer 1

您需要应用位置：固定到短div或绿色div，以便在滚动时始终保持在前面。根据我的理解，我做了一个样本，向您展示如何定位：固定工作。如果我没有正确定义尺寸，您可以在div的类中进行更改以更改为您想要的内容。运行代码段进行检查。

body {
  border: 2px solid black;
  background-color:yellow;
  margin:0px; 
  padding:0px;
}

.short {
  border: 2px solid green;
  width:74%; /*removed 1% due to the border widths*/
  position:fixed;
  right:0;
  background-color:gray;
  max-height:150px; /*fix the height of the short div so that it does to extend in height on small screens*/
  overflow:auto; /*to have scroll in the short div content if height of the content exceeds the max height*/
}

.long {
  border: 2px solid red;
  width:25%;
  background-color:white;
}

<body>
  <div class="short">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
  <div class="long">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
</body>

<强> [编辑]

我已经更新了代码。现在检查。您必须修复短div的高度，并使其内容在超过该高度时滚动。这样div就能保持固定状态，同时能够滚动内容并且不会隐藏小屏幕上的其他页面项目。希望这会有所帮助。

希望这有帮助。

在屏幕上始终显示两个不同大小的div

1 个答案: