设置高度和滚动答案

【问题标题】：Set height and scroll设置高度和滚动
【发布时间】：2015-04-10 12:31:08
【问题描述】：

我正在使用基础显示模式。

<div class="row">
    <div class="small-8 columns image-container">
        <img src="/img/myimage.jpg">
    </div>
    <div class="small-8 columns text-container">
        <!-- Long Text Goes Here -->
    </div>
</div>

有没有办法（使用CSS）设置模态框的高度，使其永远不会超过图像的高度，然后如果长文本超过高度，让它滚动？

【问题讨论】：

在两者上设置相同的高度属性，然后在文本容器上设置overflow-y: scroll。如果您事先不知道图像的大小，仅使用 css 将很难，您可能需要 javascript 来计算高度并将其设置在文本容器上
jsfiddle.net/h9L05kLt 这是一个小提琴，如果你已经知道高度和宽度
是基础所以反应灵敏，不知道高度
请添加一个 jsfiddle/jsbin，其中包含几个显示您的问题的示例。

标签： html css zurb-foundation zurb-foundation-5

【解决方案1】：

css中的高度和溢出，可以轻松控制图片高度

.image-container{
  
  height:300px /*You can place how much height you want to set*/
  overflow-y:hidden;
}

.image-container img{
  
  height:auto;
  max-height:300px;
  
}

<div class="row">
    <div class="small-8 columns image-container">
        <img src="/img/myimage.jpg">
    </div>
    <div class="small-8 columns text-container">
        <!-- Long Text Goes Here -->
    </div>
</div>

这可能对你有帮助

【讨论】：

我不是告诉你固定图像的高度，但你必须限制到一定的高度。如你所问。并且它的纵横比不会受到影响。
顺便说一句，我想帮助你，但你给了我 -ve 积分，这不是票价。如果您不喜欢我的回答，请发表评论并忽略它，但不要给负分

【解决方案2】：

我想我已经得到了你需要的东西。请看这里：https://jsfiddle.net/an1gsdm0/

我将整行包裹在 table-row 中。图像和文本是其中的 table-cells。文本的表格单元有 inline-block div，里面有文本。您可以通过操作 .image 类大小来测试它。然后文本字段高度将调整。代码如下：

HTML：

<div class="container">
    <div id='first' class='img-div'>
        <img class="image" src='http://png-4.findicons.com/files/icons/2141/web_design_creatives/128/small_smile.png'/>
    </div>

    <div class="outer-text">
        <div id='second' class='text-div'>Put a long text here...
        </div>
    </div>
</div>

CSS：

.container{
    display: table-row;
}

.img-div {
    display: table-cell;
    float: left;
}

.outer-text{
    display: table-cell;

    height: 100%;
    width: 190px;
}

.text-div{
    display: inline-block;

    height: 100%;

    overflow-y: auto;
}

要测试它以自定义各种图像尺寸，请更改图像的高度：

.image{
    height: 190px;
}

【讨论】：