2

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

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

从我的测试页面可以看出，如果将浏览器从 200 像素高度缩放到 840 像素，我的“contentwrapper”DIV 会相应地缩放。我每 20 像素使用 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%;
}}

等等等等....

4

5 回答 5

0

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

于 2013-11-14T02:53:44.927 回答
0

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

你有一个你想要根据高度尊重某个比例的 div，假设它是一个 ID 为“wrapper”的 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 底部。

这是一个小技巧，但我认为它工作得很好而且很流畅。

于 2013-11-14T02:44:50.137 回答
0

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

我建议你从这里开始，制定一个最适合你的计划。

于 2013-11-14T01:40:26.377 回答
0

您是否正在寻找这样的东西：

.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;
}

（小提琴）

于 2013-11-14T01:49:03.737 回答
0

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

<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

于 2013-11-14T01:57:55.380 回答