Question

如何设置顶部面板宽度（下图中的红色）始终设置为100％ enter image description here

这是我的代码。我不需要增加父宽度，面板应该增加大小。

<html>
    <head>

        <style type="text/css">
            .lib{
             border: 2px solid black;
             width: 200px;
             height: 300px;
             background-color: yellow;
             overflow: auto;

            }            
            .panel{
                background-color: red;
                width: 100%;
                height: 20px;
            }

        </style>


    </head>
    <body>
        <div class="lib">
            <div class="panel"></div>

            <ol>
                <li>test test test test test test test test test </li>
                <li>test testtesttesttesttesttest testtesttesttest </li>
                <li>test testtesttesttesttesttesttesttesttest </li>
                <li>test testtesttesttesttesttesttesttesttesttest </li>
                <li>test testtesttesttesttesttesttesttesttesttest </li>
            </ol>
        </div>
    </body>
</html>

Answer 1

将此添加到您的js。 http://jsfiddle.net/gnf4p3x8/

var scrollWidth = $('.lib')[0].scrollWidth;
console.log(scrollWidth)
$('.panel').width(scrollWidth + 'px');

如果你想知道为什么不用css ......这是因为div已经占据了父母宽度100％。你需要的是宽度超过父母的宽度。您可以尝试提供超过100％的宽度，即110％，120％等。但如果你需要精确的宽度，那么js就是你要走的路。

Answer 2

  .lib{
         border: 2px solid black;
         width: 200px;
         height: 300px;
         background-color: yellow;
         overflow: auto;

        }            
        .panel{
            background-color: red;
            width:  132%;
            height: 20px;

        }

这不是一种正确的方法，你可以用jsthat做到这一点比这更好。这是小提琴.... http://jsfiddle.net/r5g9hpju/

Answer 3

＆＃13;

.lib{
             border: 2px solid black;
             width: 200px;
             height: 300px;
             background-color: yellow;
             overflow:auto;
             word-wrap: break-word; 
            }            
.panel{
                background-color: red;
                width:100%;
                height: 20px;
       }

＆＃13;

<div class="lib">
            <div class="panel"></div>

            <ol>
                <li>test test test test test test test test test </li>
                <li>test testtesttesttesttesttest testtesttesttest </li>
                <li>test testtesttesttesttesttesttesttesttest </li>
                <li>test testtesttesttesttesttesttesttesttesttest </li>
                <li>test testtesttesttesttesttesttesttesttesttest </li>
            </ol>
        </div>

＆＃13;

父流过流时如何设置子div宽度100％？

3 个答案: