Question

我收到了以下代码： https://jsfiddle.net/2uhttdgk/3/

html {
  height: 100%;
}
html, body {
    min-height: 100% !important;
    /* prevent horizontal scrolling */
    max-width: 100% !important;
    overflow-x: hidden !important;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}


#menuButton {
    float:left;
    background-image: url("../images/hamburger_menu.png");
    width: 50px;
    height: 40px;
    margin-right: 5px;
}

#powerButtonBox {
    float: right;
}

#outerBox {
    min-height: 100%; 
    height: auto !important;
    height: 100%;
}

#title {
    background: #E95353;
    padding: 10px;
    color: white;
    font-size: x-large;
}


#outerBox {
    width: 100%;
    height: 100%;
}


.nav a small {
    display:block;
}
.nav {
    background: #E95353;
}
.nav a {
    border-radius:0px;
    color: white;
}

.nav-pills>li {
    text-align: center;
    padding: 10px;
    font-size: large;
}

.nav-pills>li.active { 
    background-color: #E95353; /*EF8686*/
    border-bottom: 5px solid white;
    color: white;
}

.nav-pills>li.active>a, .nav-pills>li.active>a:hover, 

.nav-pills>li.active>a:focus { 
    color: #fff; 
}

<div id="outerBox">
    <div id="title"> 
        <div id="menuButton"></div>
        This is the Title
        <div id="powerButtonBox">It is <a href="#" id="powerButton">powered on</a></div>
    </div> 

    <ul class="nav nav-pills nav-justified">
        <li id="newStuffButton" data-target="#" data-slide-to="0" class="store-tab active"><a href="#">New Stuff</a></li>
        <li id="doneStuffButton" data-target="#" data-slide-to="1" class="store-tab"><a href="#">Done</a></li>
    </ul>

    <div id="newStuff" class="list-group tabContent"></div>
    <div id="doneStuff" class="list-group tabContent"></div>
</div>

我的问题是，当显示宽度太小时，带按钮的div会溢出title-div。您可以在jsfiddle中滑动较小的宽度时重新创建错误。

我可以，有一个换行符。那是完美的。但它仍然应该有红色背景并且在title-div中。我怎么能做到这一点？

Answer 1

只需将display: inline-block;和width: 100%;添加到#title元素即可。

然后高度将调整到其内容，红色背景将保留。

修改

我不知道哪一个更干净，或者其中一个更好，但是像@Temani Afif说overflow: auto;也会有效。

当显示较小时，Div会从外部div中弹出

1 个答案: