Question

首先在这里查看我的测试页面： http://www.joblesspunkdesigns.com/stackoverflow/main/

我要做的是使用CSS控制浏览器高度的DIV宽度。我不想使用Javascript，Jquery或任何其他语言。

从我的测试页面可以看出，如果您将浏览器从200px的高度扩展到840px，我的“contentwrapper”DIV会相应地缩放。我用每次20px的34次@media查询完成了这个...不是最好的方法，但正如你所看到的，它有效......有点......

我的END目标是让“contentwrapper”DIV中的所有内容始终垂直和水平居中以及重新调整大小，以确保“contentwrapper”DIV中的所有内容始终可见，而无需滚动酒吧。

有没有人知道实现我想做的事情的可行方法？

谢谢你的帮助！

/*HTML*/

<div class="content">
    <div class="contentwrapper">
        <img class="carousel" src="img/projectimage_placeholder.jpg"/>
        <h2>Project Name</h2>
        <div class="carouselnav"></div>
    </div>
</div>


/*CSS*/

.contentwrapper {
left: 1.25rem;
right: 1.25rem;
margin: 0 auto;
}

@media all and (min-height:200px) {
.contentwrapper {
width: 149px;
margin-top: 0.3%;
}}

@media all and (min-height:220px) {
.contentwrapper {
width: 154px;
margin-top: 1.5%;
}}

@media all and (min-height:240px) {
.contentwrapper {
width: 170px;
margin-top: 1.5%;
}}

依此类推......等等。

Answer 1

如果您倾向于使用jQuery解决方案，则只需要利用.resize()事件或.outerWidth()和.outerHeight()的组合。

我建议你开始here并制定一个最适合你的计划。

Answer 2

你在寻找这样的东西：

.content {
    display: table;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.contentwrapper {
    display: table-cell;
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: middle;
}

img {
    max-width: 100%;
    height: auto;
}

（fiddle）

Answer 3

不确定你对垂直居中的意思，但你应该可以从这里开始工作：

<div class="container">

    <div class="l-table">
        <div class="l-table--cell">
            <div class="l-table--center">
                <article>
                COntent
                </article>

            </div>
        </div>
    </div>
</div>

/******** Main Layout Blocks ********/
html,
body
  // To avoid scrollbar
  height: 100%

.container
  // ^ needs to get 100% height as well
  height: 100% 
  margin:       auto
  max-width:    800px
  overflow-y: auto


/******** Layout-Classes for centering ********/
.l-table
  display: table
  height: 100%
  .lt-ie8 &
    // Polyfill for IE7 applied with parent selector
  //  behavior: url(polyfills/display-table.min.htc)

.l-table--cell
  display: table-cell
  vertical-align: middle

.l-table--center
  margin: 0 auto

http://codepen.io/johannesjo/pen/jrGdq

以及使用此技术的另一种布局： http://codepen.io/johannesjo/pen/bmlnD

Answer 4

如果我理解正确的话，我曾经做过类似的事情。当您仅设置侧面尺寸并将另一侧保留为“自动”时，浏览器会保持图像纵横比。所以，使用一个奇怪的黑客你可以依赖它。我现在没有代码，但这是个想法：

你有div想要根据高度尊重某个比例，让我们说这是一个带有ID'包装'的div，所以，你的css会是这样的：

#wrapper {
  height: 80%; //use what you need to make the height relative
}

然后在该包装器中你将有两件事：一个内联块透明图像，你想要的比例和一个绝对定位div你的内容将是：

<div id='wrapper'>
  <img src='mi_inivisible_hack.png' id='invisible_hack' alt='' />
  <div id='wrapper_content'>Your content here</div>
</div>

现在css将是：

#wrapper {
  height: 80%;
  width: auto;
  position: relative;
}

#invisible_hack {
  height: 100%;
  width: auto;
}

#wrapper_content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

现在，当您调整窗口大小时，＃wrapper将变小，然后图像必须变小，＃wrapper将缩小到与您的比例相关的内容（图像）。然后#wrapper_content也会缩小，因为它从0左移到0右0和0从上到0。

这是一个小小的黑客，但我认为它很有效且流畅。

Answer 5

如下所述 - 不使用百分比而非像素值适合您吗？

使用CSS控制浏览器高度的DIV宽度

5 个答案: