Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
833 views
in Technique[技术] by (71.8m points)

html - Scaling an image with a div, whose child sets the height

A div, by itself, is the height of it's contents.

I want a div to include two children: another div (or image that is left aligned) and an unordered list (ul). The inner div (or image) will match the height of the parent div, the parent div height will conform to the height of the list (which can contain any reasonable number of items).

I am unsure how to set the height of the parent div to match that of the list and have the inner div match the height of the outer div. Done properly through CSS.

Alternate solutions are happily accepted, this is just one way I am attempting to address my design goals.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Live Demo

  • Tested in IE7/IE8, and recent versions of: Firefox, Chrome, Safari, Opera.
  • The height of the image is purely dependent on the height of the ul.
  • To feed IE7 the required extra rule height: 100%, I'm using the Star hack. You could use conditional comments, or the Star plus hack instead if you need 100% valid CSS.

CSS:

#iContainer {
    background: #ccc;
    overflow: hidden;
    position: relative
}
#iContainer div {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    *height: 100% /* just for you, IE7 */
}
#iContainer img {
    height: 100%
}
#iContainer ul {
    float: right
}

HTML:

<div id="iContainer">

    <div><img src="https://dummyimage.com/500x700/f0f/fff" /></div>

    <ul>
        <li>list 1</li>
        <li>list 2</li>
        <li>list 3</li>
        <li>list 4</li>
        <li>list 5</li>
        <li>list 6</li>
        <li>list 7</li>
        <li>list 8</li>
    </ul>

</div>

The Big Pink Image:


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...