Div is popping out of outer div when display smaller
本问题已经有最佳答案,请猛点这里访问。
我得到了以下代码:https://jsfiddle.net/2uhtdgk/3网站/
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | 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; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 | This is the Title It is powered on <ul class="nav nav-pills nav-justified"> <li id="newStuffButton" data-target="#" data-slide-to="0" class="store-tab active">New Stuff </li> <li id="doneStuffButton" data-target="#" data-slide-to="1" class="store-tab">Done </li> </ul> |
我的问题是,当显示宽度太小时,带有按钮的DIV会溢出标题DIV。当在jsFiddle中滑动较小的宽度时,可以简单地重新创建错误。
我没问题,有断线。那是完美的。但它应该仍然有红色背景,并且在标题栏中。我如何才能做到这一点?
只需将
然后高度将调整到其内容,红色背景将保持不变。
编辑
我不知道哪一个更干净,或者哪一个更好,但就像@temani afif所说的,