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

Question

首先在这里查看我的测试页： 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%;
}}     

等等，等等……

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 为“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 下。

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

Answer 5

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