0

DIV が動的にフィールドされたコンテンツから切り取られないようにする方法はありますか? コンテンツが十分に大きい場合は、全幅のままでズームしても問題ありませんが、小さい場合はトップ グループから外れます。

これが私のhtmlとcssのコピーです：

<style>
#title{
font-family: Arial;
font-size: 1.5em;
font-weight: bold;
text-align: center;
background: beige;
padding: 7px 50px 7px 50px;
margin: 10px 0px 0px 0px;       /* L&R margins need to be 0px */
}

#box1{                          /* Outer Box */
float: left;
font-size: 1em;
text-align: justify;
background: beige;
margin: 0px;            /* L&R margins need to be 0px */
padding: 0px 50px 10px 50px;
}

#box2{                  /* Inner Box */
font-family: Arial;
float: right;
width: 50%;
font-weight: bold;
font-size: 1em;
text-align: justify;
background: beige;
margin: 0px;            /* L&R margins need to be 0px */
padding: 0px 0px 0px 50px;
display: block;
}

#box3{                  /* Footnotes */
margin: 0px;            
float: left;
font-size: 1em;
text-align: justify;
background: beige;
padding: 0px 50px 30px 50px;
border-radius: 0px 0px 15px 15px;
}

#footnote_columns{
display: block;
overflow:hidden;
/*columns: auto auto;   /* column-count: auto column-width: auto; */
column-fill: balance;   /* not working!!! */
column-count: 3;
-moz-column-count: 3;
-webkit-column-count: 3;
column-width: auto;
-moz-column-width: auto;
-webkit-column-width: auto;
column-gap: 2em;
-moz-column-gap: 2em;
-webkit-column-gap: 2em;
}
</style>
<!-- ====================== Page Title ===================== -->
            <div id='title'>
                <HR>
                'Title' centered & full width
                <HR>
            </div>
<!-- ============ text box inside text box ================ -->
                <div id="box1">             <!-- Left Side -->
                    <div id="box2">         <!-- Right Side -->
                        <p>
                        INNER Box2 text: " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed nibh eu velit iaculis auctor non ac magna. In at enim quis mi aliquam vestibulum imperdiet eu magna. Ut aliquet arcu at felis dapibus euismod. Suspendisse dolor turpis, faucibus quis mollis vitae, iaculis vel urna. Integer sit amet dui malesuada justo facilisis rutrum sed vel neque. Cras condimentum est sit amet mi dapibus convallis. Donec molestie euismod velit id pharetra. Praesent sit amet eros at quam ullamcorper sodales. Aenean ligula dui, ultricies quis commodo ut, lobortis eu justo. Nulla dolor augue, vulputate at placerat in, ornare et purus. " 
                        </p>
                        <HR>
                    </div>
                        <p>
                        OUTER Box1 text: " Etiam at pretium urna. Morbi condimentum consequat nisi, nec pulvinar tellus fermentum at. Cras ut sodales ante. Sed feugiat sem eget eros lobortis sit amet porttitor mauris tempus. Sed eros est, placerat at sollicitudin quis, scelerisque ac dolor. Proin mollis euismod condimentum. Morbi eget tortor justo, eu vestibulum orci. Pellentesque eu ante a nunc adipiscing sodales dictum vitae eros. Sed tellus mauris, volutpat non vulputate ut, vulputate ut orci. Vivamus facilisis ipsum a tellus gravida pellentesque. Nam risus magna, eleifend dignissim porttitor et, sagittis quis nisl.

                        Sed eget lorem magna. Sed sed imperdiet elit. Sed vulputate dapibus tellus, nec scelerisque risus hendrerit quis. Fusce aliquet erat non nibh egestas posuere. Aliquam ipsum velit, venenatis vel dictum ac, luctus nec sapien. In hac habitasse platea dictumst. Vivamus a elit augue. Integer pellentesque enim sit amet sem condimentum ut tincidunt nunc mollis. Cras in tellus eget dui pellentesque adipiscing. In varius ullamcorper felis, vitae sagittis turpis rutrum in. Aliquam consectetur consectetur erat, quis tristique magna laoreet id. Etiam orci arcu, ultricies eget interdum non, mollis quis est. Mauris odio lacus, tempus at porta quis, laoreet porta tortor. "
                    <HR>
                </div>
                <div id='box3'>
                        <div id='footnote_columns'>
                        <p>
                        FOOTNOTE Box3 text: " Vivamus egestas tempor molestie. Morbi scelerisque nunc non eros ultrices volutpat. Suspendisse potenti. Sed lobortis, odio vitae pharetra dapibus, risus turpis scelerisque risus, a dapibus dui ante sed ante.   "
                        </p>
                        </div>
                    <HR>
                </div>
<!-- ======================================================= -->

例 1 は機能します - たくさんの txt があります -

例 2 壊れる - ズームすると -

(1) http://jsfiddle.net/NuxWD/1/ - 全文

(2) http://jsfiddle.net/NuxWD/2/ - ズームしてみてください。脚注に注意してください。

(3) http://jsfiddle.net/NuxWD/3/ - 脚注に少量の txt

(4) http://jsfiddle.net/NuxWD/4/ (5) http://jsfiddle.net/NuxWD/5/ - すべてが壊れます!

これは動的コンテンツに必要です。例 (4) で BR を削除すると、フレームは正常なままです。

段落が短い場合でもフレームを全幅のままにするにはどうすればよいですか?

  • 一番下の行の脚注に注目してください。txt の量を調整してみてください。またはズームアウト

IE は列の脚注さえもまったく表示しません。

txt の量が少ないかズームアウトしても、タイトルがまったく影響を受けないのはなぜですか?

4

0 に答える 0