-1

Recently I tested one website and when I zoomed out it to 33% or 25% in Chrome, some text in static height divs "climbs" out from this div.

I read about:

  1. text-size-adjust (now it's an experimental technology)
  2. font-size-adjust (but it dropped to support in CSS 2, it will be started to support from Chrome 44, actual version just 42).

What you recommend to do? I understand, zoom out to 25-33% it's unreal it real situation, but it's a problem. I attached my JSFiddle and code below.

HTML

<div id="block">
    <ul>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
    </ul>
<div>

CSS

#block {
    width: 100%;
    height: 200px;
    background-color: red;
}
AleshaOleg
  • 2,171
  • 1
  • 15
  • 29

2 Answers2

1

I'd add the "overflow:auto;" css property to the div with static height. That way scrollbar will appear when you zoom out to less than ~33%. As a result, your text won't "poke out". Zooming out to less than 33% will shrink fonts to minimum font size set in the chrome settings. As far as I'm aware, you can't set the custom font sizes relative to zooming in and out.

seńor fiksie
  • 51
  • 4
  • Thanks for interesting, this fix is working, but visually it looks don't good. – AleshaOleg May 11 '15 at 19:21
  • Does it display scrollbar immediately? It depends on the font size, line-height and preset margin and padding on ul and li elements. Maybe you could mess around with those values so they do not push the div beyond 200px in height and hide scrollbar until you zoom out. Check out this advice about hiding the scrollbar while still being able to scroll: http://stackoverflow.com/questions/16670931/hide-scroll-bar-but-still-being-able-to-scroll – seńor fiksie May 11 '15 at 19:46
  • of course, i know about oveflow: hidden. Yep, that's also important to hide scrollbar. It this website, which I tested line-height was a 26px, that's near 1.75em (if you have standart value - 16px in browser). And content loosed more quickly. So, I asked just about Chrome, because in other browsers everything looking cool (also except Opera, because it's a webkit too). Of course, I do not see anything in this zooming, but still I would like that the content is not lost, when I zoom out. Thanks for your advices! – AleshaOleg May 12 '15 at 02:25
0

set height 100%

#block {
    width: 100%;
    height: 100%;
    background-color: red;
}
<div id="block">
    <ul>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
    </ul>
<div>
Navneet Panchariya
  • 158
  • 7