使其适合内容

Question

我正在制作响应式面板导航，我遇到了问题.. 问题是，如果内容小于视口，我不能得到包含div以适合内部内容，如果视口小于内部内容并且获得滚动，则无法获得正文/视口的100％。

当内容大于视口时，测试1获得滚动（好）但是当内容较小时，包装器是视口的100％（坏，在该div下没有可点击性，按钮必须保持在关于z-index的div下，因为我将在下面有一个全屏幕图）测试2反之亦然。我需要混合使用这些示例 - 如果视口较小，则包装器可以获得滚动，如果视口较大，则适合内部内容。

我是愚蠢的还是什么 - 这似乎是一项简单的任务

测试1 包装纸高度：100％; http://codepen.io/anon/pen/esqxL

<button id="button">Click</button>
<div id="wrapper">
<div id="left-menu-top">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tristique laoreet dui, id porttitor ipsum convallis vel. Integer turpis nisl, rhoncus sed hendrerit sit amet, adipiscing nec eros. Suspendisse potenti. Nam quis risus libero. Vestibulum et diam nisl, eget feugiat leo. Quisque rutrum fermentum leo, sit amet semper eros elementum eu. Donec aliquam magna et sem condimentum rutrum. Sed augue nulla, rhoncus venenatis scelerisque sed, accumsan sed magna. In hac habitasse platea dictumst. Ut quis felis dui.</p>

</div>
</div>

    * {
  box-sizing: border-box;
}

html {
    height:100%;
    overflow-y:hidden;
}

body {
    height:100%;
    position:relative;
    margin:0;
    padding:0;
}

#wrapper {  
  padding:8px;
  width:340px;
  height: 100%;
  position:fixed;
  overflow: auto;
  background-color: #000000;
  background-color: rgba(0, 0, 0, 0.8);

}

#left-menu-top {
    width: auto;
    display:block;
}

#button {
    bottom:10px;
    position:absolute;
}

测试2 包装纸高度：auto; http://codepen.io/anon/pen/yovkJ

<button id="button">Click</button>
<div id="wrapper">
    <div id="left-menu-top">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tristique laoreet dui, id porttitor ipsum convallis vel. Integer turpis nisl, rhoncus sed hendrerit sit amet, adipiscing nec eros. Suspendisse potenti. Nam quis risus libero. Vestibulum et diam nisl, eget feugiat leo. Quisque rutrum fermentum leo, sit amet semper eros elementum eu. Donec aliquam magna et sem condimentum rutrum. Sed augue nulla, rhoncus venenatis scelerisque sed, accumsan sed magna. In hac habitasse platea dictumst. Ut quis felis dui.</p>

    </div>
</div>

* {
  box-sizing: border-box;
}

html {
    height:100%;
    overflow-y:hidden;
}

body {
    height:100%;
    position:relative;
    margin:0;
    padding:0;
}

#wrapper {  
  padding:8px;
  width:340px;
  height: auto;
  position:fixed;
  overflow: auto;
  background-color: #000000;
  background-color: rgba(0, 0, 0, 0.8);

}

#left-menu-top {
    width: auto;
    display:block;
}

#button {
    bottom:10px;
    position:absolute;
}

是否可以使用css或者我需要一些javascript？

TNX

Answer 1

使用max-width CSS属性。

#wrapper {
    max-width: 100%;
    box-sizing: border-box;
}

JS-Fiddle

max-width: 100%会将宽度限制为父容器的宽度。 box-sizing设置为border-box，因此在计算屏幕宽度wrapper时会考虑填充和边框。

有关这些属性的更多信息，请查看：

max-width http://www.w3schools.com/cssref/pr_dim_max-width.asp
box-sizing http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

使其适合内容

如果您知道盒子的宽度，可以使用以下媒体查询：

@media (max-width: 340px) {
    #wrapper {
        position: static;
    }
}

它的作用是，如果屏幕（窗口）比340像素更薄，则position: static CSS属性将应用于包装器。如果媒体查询在标准#wrapper定义之后，它将覆盖。否则，请使用!important。

绝对定位包含div以适合内部内容或视口

1 个答案:

使其适合内容