3个并排的div，适合窗口的高度，没有外部css答案

【问题标题】：3 side by side divs, height to fit window, no external css3个并排的div，适合窗口的高度，没有外部css
【发布时间】：2016-10-20 14:29:28
【问题描述】：

我正在制作一个简单的 HTML 页面，其中包含 3 个并排放置的 div，中间的一个包含与窗口一样高的图片 - 它必须完全独立地包含在一个 HTML 代码中，没有外部内容。

我只管理调整大小的东西（一旦放入 div 就会中断）：

<head>
    <style> 
        * { 
            padding: 0; 
            margin: 0; 
        } 

        .fit { 
            max-width: 100%; 
            max-height: 100%; 
        } 

        .center { 
            display: block; 
            margin: auto; 
        } 
    </style> 

    <script src="code.jquery.com/jquery-latest.js"></script>; 
    <script type="text/javascript" language="JavaScript"> 
        function set_body_height() { 
            var wh = $(window).height(); 
            $('body').attr('style', 'height:' + wh + 'px;'); 
        } 

        $(document).ready(function() { 
            set_body_height(); 
            $(window).bind('resize', function() { 
                set_body_height(); 
            }); 
        }); 
    </script> 
</head>

【问题讨论】：

你能展示一下你已经做了什么吗？
欢迎来到 Stack Overflow！请扩大你的问题。我们需要以Minimal, Complete, and Verifiable example 的形式查看您的代码，其中详细说明了您要完成的工作以及您遇到的问题和任何错误。见How to Ask。
这是我的位置 (+body with pic)
更新您的问题，而不是将其放在评论中！

标签： html resize placement self-contained

【解决方案1】：

你是这个意思吗？

<div style="float:left; width:33%; background-color:#003366;">test</div>
<div style="float:left; width:33%; background-color:#004366;">test</div>
<div style="float:left; width:33%; background-color:#005366;">test</div>

【讨论】：

【解决方案2】：

“没有外部内容”，我假设您的意思是要在一个 html 文档中添加样式？您可以像@Gildas 那样将其添加到标题或内联中。

我认为您可以使用 flexbox 完成您的要求。

HTML：

<div class="wrapper">
  <div class="wrap-item">div 1</div>
  <div class="wrap-item wrap-img"> div 2 with img</div>
  <div class="wrap-item"> div 3</div>
</div>

CSS：

.wrapper{
  width: 80vw;
  height: 100vh;
  border: 1px solid black;
  margin: 0 auto;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
}
.wrap-item{
  width: 100%;
  height: 80%;
  border: 1px solid red;
}

.wrap-img{
  height: 100%;
  border: 1px solid blue;
}

这里是codepen

【讨论】：

不，这不会调整图片高度:(
对不起，让我重新表述一下：关键是拥有一个完全响应的页面，无论窗口大小如何，所有内容都可见