jquery - 如何使 div 填充视口(viewport)的其余部分并保持纵横比(CSS 或 jQuery)？

Question

我有一个使用 Flexbox 构建的简单的类似 UI 的布局。它包含两个具有固定大小的栏和一个预览窗口，该窗口应该完全响应。

我在 Haml 中的预览窗口看起来像这样:

.preview
  .page

但问题是......当我使用以下样式时:

.page {
  width: 100vmin;
  padding-bottom: 56.25vmin; //16:9 56.25
}

它不会填充视口(viewport)的其余部分。

如果我做这样的事情:

.page {
  width: 100%;
  padding-bottom: 56.25%; //16:9 56.25
}

它填充了整个可用空间，但对于某些视口(viewport)分辨率，.page 可能会超出 .preview 并覆盖我的栏的一些空间。无论如何， padding-bottom 宽高比解决方案可能不适合我，因为在未来，我需要从 .page div 读取坐标，所以我假设它应该有真实的尺寸，而不是用填充物构建。这就是为什么我的问题是:“如何制作完全响应式的 div，它适应视口(viewport)大小的变化并保持其纵横比，而无需 padding-bottom 技巧(允许 jQuery)？”此外，当 .preview div 的宽度大于高度时，.page 应该以高度作为标准以防止溢出(例如 YouTube 播放器)。

HTML:

<div class='editor'>
  <div class='actions-bar'>
    <a class='actions' href='#'>Каждый</a>
    <a class='actions' href='#'>Охотник</a>
    <a class='actions' href='#'>Желает</a>
    <a class='actions' href='#'>Знать</a>
    <a class='actions' href='#'>Где</a>
    <a class='actions' href='#'>Сидит</a>
    <a class='actions' href='#'>Фазан</a>
  </div>
  <div class='tool-bar'>
    <div class='tools'>
      <div class='tool'></div>
      <div class='tool'></div>
      <div class='tool'></div>
      <div class='tool'></div>
      <div class='tool'></div>
      <div class='tool'></div>
    </div>
  </div>
  <div class='preview'>
    <div class='page'></div>
  </div>
</div>

CSS:

.editor {
  position: fixed;
  height: 100%;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
}
.editor .actions-bar {
  height: 50px;
  min-width: 500px;
  width: 100%;
  background-color: #E3142C;
  display: flex;
  align-content: center;
  align-items: center;
  padding: 0;
}
.editor .actions-bar .actions {
  width: 100px;
  text-align: center;
  height: 100%;
  display: flex;
  color: white;
  text-decoration: none;
  vertical-align: middle;
  align-content: center;
  align-items: center;
  justify-content: center;
}
.editor .actions-bar .actions:hover {
  background-color: #f04155;
}
.editor .tool-bar {
  height: 95%;
  top: 5%;
  min-width: 175px;
  width: 175px;
  background-color: #F76475;
}
.editor .tool-bar .tools {
  display: flex;
  flex-wrap: wrap;
}
.editor .tool-bar .tools .tool {
  height: 50px;
  width: 50px;
  margin-left: 25px;
  margin-top: 25px;
  background-color: red;
  border: 2px solid #F7F7F7;
  border-radius: 5px;
}
.editor .tool-bar .tools .tool:hover {
  transform: scale(1.1);
}
.editor .tool-bar .tools .tool:active {
  transform: scale(1.1);
  border-color: #39b8f7;
}
.editor .preview {
  height: 100%;
  top: 50px;
  width: auto;
  left: 250px;
  background-color: #d0d0d0;
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  align-items: center;
}
.editor .preview .page {
  width: 100vmin;
  padding-bottom: 56.25vmin;
  background-color: white;
}

您可以在那里看到它是如何工作的:

http://codepen.io/dukeimg/pen/yYbgGq

我不是在等待现成的解决方案。如果至少有人能向我描述如何在 CSS 或 jQuery 上正确实现这一点，我将非常感激。

请不要因为我的 SCSS 而责怪我 - 这只是一个草稿，我知道 DRY，稍后我会重新编写此代码。

P.S.:请原谅我的英语 - 我是俄罗斯人:)

Answer 1

我自己的解决方案:

HTML:

<div class='editor'>
  <div class='actions-bar'>
    <a class='actions' href='#'>Каждый</a>
    <a class='actions' href='#'>Охотник</a>
    <a class='actions' href='#'>Желает</a>
    <a class='actions' href='#'>Знать</a>
    <a class='actions' href='#'>Где</a>
    <a class='actions' href='#'>Сидит</a>
    <a class='actions' href='#'></a>
  </div>
  <div class='main'>
    <div class='tool-bar'>
      <div class='tools'>
        <div class='tool' id='label'></div>
        <div class='tool' id='image'></div>
        <div class='tool' id='video'></div>
        <div class='tool' id='audio'></div>
        <div class='tool' id='social'></div>
        <div class='tool' id='note'></div>
       </div>
    </div>
    <div class='preview'>
      <div id='page'></div>
    </div>
  </div>
  <div class='status-bar'></div>
</div>

CSS:

.body {
  margin: 0;
  padding: 0;
  height: 100vh;
}

.editor {
  display: flex;
  flex-flow: column;
  min-height: 100%;
  user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
}

.editor .main {
   flex: 1 1 auto;
   display: flex;
   min-height: 100%;
}

.editor .main .tool-bar {
  min-height: 100%;
  min-width: 175px;
  width: 175px;
  background-color: #F76475;
}

.editor .main .tool-bar .tools {
  display: flex;
  flex-wrap: wrap;
}

.editor .main .tool-bar .tools .tool {
  height: 50px;
  width: 50px;
  margin-left: 25px;
  margin-top: 25px;
  background-color: #f0f0f0;
  border: 2px solid red;
  border-radius: 5px;
}

.editor .main .tool-bar .tools .tool:hover {
  transform: scale(1.1);
}

.editor .main .tool-bar .tools .tool:active {
  transform: scale(1.1);
  border-color: #39b8f7;
}

.editor .main .preview {
  background-color: #d0d0d0;
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  align-items: center;
}

.editor .main .preview #page {
  width: 80%;
  background-color: white;
}

.editor .actions-bar {
  flex: 0 1 auto;
  height: 50px;
  width: 100%;
  background-color: #E3142C;
  display: flex;
  align-content: center;
  align-items: center;
  padding: 0;
}

.editor .actions-bar .actions {
  width: 100px;
  text-align: center;
  height: 100%;
  display: flex;
  color: white;
  text-decoration: none;
  vertical-align: middle;
  align-content: center;
  align-items: center;
  justify-content: center;
}

.editor .actions-bar .actions:hover {
  background-color: #f04155;
}

.editor .status-bar {
  background-color: #2E2F30;
  flex: 0 1 40px;
}

jQuery:

function pageAdjust() {

$('#page').width('80%');
$('#page').height($('#page').width() * 0.5625);

if ($('.preview').height() <= $('#page').height()) {
    $('#page').height($('.preview').height());
    $('#page').width($('.preview').height() * 1.7778);
}

$(window).on('resize', function(){
  pageAdjust();
});


$(document).ready(function() {
  pageAdjust();
});

工作示例:

http://codepen.io/dukeimg/pen/yYzggO

--V.