如何设置包含文本的div的大小，以便可以使用滚动条功能 [英] How to set size of div containing text so that can use the scroll bar feature

问题描述

我的CSS出现问题。

我已附上2张图像。第一个显示div的高度设置为110px，与旁边的图像相比，您可以看到该高度已正确设置，并且显示了滚动条。

I have attached 2 images. The first one shows the height of the div set to 110px and you can see the height is set correctly compared to the image next to it and it shows a scroll bar.

现在，我想更改div的高度，使其高度为100％（与图片水平），并且它将显示滚动条，因为文本不不合身。相反，如您在第二个屏幕截图中所见，文本超出了图片的高度。

Now I want to change the height of the div so that it's height is 100% (level with the picture) and it will show a scroll bar because the text doesn't fit. Instead, as you can see in the second screenshot, the text goes past the height of the picture.

如何使div与图像的高度相同因此会出现滚动条？

How can I get the div to be the same height as the image so then the scroll bar will appear?

<section class="slideInRight">
    <div class="wrap">
        <img src="img/slide1.png" class="alignright size-75">
        <div class="alignleft size-20 scrollText">
            <p>In this course, we’re focussing on three main areas.</p>
            <p><strong>The Software Development Lifecycle</strong><br />
                This is essential in understanding how development teams work within IT. Questions around the software
                development life cycle will pop up in interviews so it’s essential to grasp the knowledge around this
                area.</p>
            <p><strong>IT Support and Testing</strong><br />
                These two areas are perfect to step into an IT career and progress further. They start off non-technical
                so anyone can make a start in it and then you can decide if you want to progress to a more technical
                role or branch out to different areas in IT.</p>
        </div>
    </div>
</section>

这是我的CSS：

.scrollText{
    font-size:medium;
    overflow: auto;
    height: 80%;
}

推荐答案

我认为您应该服用看看其中一些解决方案，看看其中是否适合您的情况。

I think you should take a look at some of these solutions and see if one of them fits your case.

• CSS：如何在固定高度的容器内获取div的滚动条


• OR


• 在固定大小的div中具有滚动条的div

• CSS: how to get scrollbars for div inside container of fixed height
• OR
• divs with scrollbars in div with fixed size

您应尝试更改 height 在您的手写笔中g改为实际数字，而不是百分比，然后看看这是否对展示效果有影响。上面的解决方案具有 height 的精确值，并且似乎可以正常工作。

You should try changing the value of height in your styling to actual number instead of a percentage, and see if that has any effect on presentation. Solutions above have exact values for height and seem to work that way.

下面是一个解决方案

• 在div中滚动全图


• Scroll full image inside div

这篇关于如何设置包含文本的div的大小，以便可以使用滚动条功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！