Question

我在html页面中有一个典型的下拉菜单，在相对位置相对的父级中绝对位置。当我减小浏览器窗口的大小（使其非常小）并单击下拉菜单时，后者确实打开了，但它的可见区域仅限于浏览器视口。

我希望使下拉菜单完全可见，即使这意味着下拉菜单的一部分在浏览器窗口之外也是可见的。

到目前为止，这是我的代码：

 $(document).ready(function() {
  $("#side-caret").click(function() {
    $(".side-caret-drop-down").css("display", "block");
  });
});

.file-menu {
  background-color: #99CCFF;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.file-menu-item {
  display: block;
  float: left;
  padding-left: 5px;
  padding-right: 5px;
  color: black;
  margin: 1px;
  text-decoration: none;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.file-menu-drop-down {
  display: block;
  padding-left: 3px;
  padding-right: 3px;
  color: black;
  text-decoration: none;
}

.side-caret {
  float: left;
  margin: 2px;
  position: relative;
}

.side-caret-drop-down {
  position: absolute;
  display: none;
  border: solid black 1px;
  background-color: #FFF8DC;
}

.side-caret-drop-down a {
  display: block;
  text-decoration: none;
}

.clearfix {
  clear: both;
  width: 100%;
}

.file-menu>.file-menu-item:hover {
  background-color: white;
}

.file-content {
  white-space: pre;
  overflow: auto;
}

.file-menu .file-menu-item.selected {
  background-color: white;
}

body {
  margin-left: 0px;
  margin-right: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top"></div>
<div id="left"></div>
<div id="content">
  <div class="file-menu">
    <a class="file-menu-item" href="#" title="dummy">HelloWorld.java</a>
    <a class="file-menu-item" href="#" title="dummy">Base.java</a>
    <div id="side-caret" class="side-caret">
      <a class="file-menu-drop-down" href="#" title="Drop Down">
        <font size="1"><sup>&#8811;</sup><span id="counter">1</span></font>
      </a>
      <div class="side-caret-drop-down">
        <a class="file-menu-item" href="#" title="dummy">Derived1111111111111111111111111111111111.java</a>
        <a class="file-menu-item" href="#" title="dummy">Derived2222222222222222222222222222222222.java</a>
      </div>
    </div>
    <div class="clearfix">
    </div>
  </div>
  <div class="file-content">
  </div>
</div>

Answer 1

您无法在浏览器窗口之外显示任何内容，所有内容均已裁剪。

但是，您可以要做的是设置minimum width和height。这样可以防止浏览器缩小到您确定的大小之外。

body {
  min-width: 500px;
}

如果窗口缩小到该宽度以外，它将确保滚动条。您还可以考虑使用此“技巧”来制作一个具有硬编码大小的新弹出窗口：https://stackoverflow.com/a/16174183/3029173

创建一个下拉列表，该下拉列表超出了浏览器窗口的范围

1 个答案: