Question

我遇到了div中溢出内容的问题。我正在使用SharePoint，一些内容[即Libraries或Lists或包含上述内容的大型webpart]将延伸到可见的显示空间，但正文内容不能正确滚动。

我的结构看起来像这样：

＆＃13;

html {100%}
body { background: #010831; font: 500 1em 'Raleway'; height: auto; min-height: 100%; margin:0; overflow:hidden;}
   #container { margin: 0 auto; min-height: 100%; }
   #topBar {background: #010831; font: inherit; padding: 5px; height: 80px; margin-bottom: 1px;}

  .topline {width:100%; height:20px; font-size:0.8em; color:#fff;}
  .social {width: 30%; float:right; text-align: right; font-size: 1.2em;}
#searchBar {width: 25%; float:right;}
#searchBox {border-radius: 10px; width: 250px; background:#343a5d; height:25px; color: #fff; font-size:1.2em;}
#quicklaunch {width:18%; min-height: 35%; color: #666; font: 600 1em 'Raleway'!important; padding-top:4px;}
    #main {width:100%; background:#fff; display:flex;}
#s4-workspace {width:auto!important; overflow:auto!important; background:#fff;}
    #content {width:80%}
    #footer {background:#000; width:100%}

＆＃13;

        <body>
        <div id="s4-workspace">
          <div id="bodyContainer">
              <div id="container"> 
              <!-- this is the beginning of my custom coding, and my own styles. -->
                    <header id="topnav">
                       TOP NAV MENU HERE
                    </header>
                      <section id="main">
                          <div id="quicklaunch"> SIDE NAV HERE</div>
                             <div id="content"> ALL USER DRIVEN CONTENT GOES HERE</div>
                       </section>
                   <footer id="footer"></footer>
                </div>
               </div>
    </body>

＆＃13;

发生的事情是，设置为80％的内容div不会显示正确延伸到屏幕之外的内容。内容溢出但背景是我的身体颜色（深蓝色）。我无法将内容div宽度设置为100％，因为这将使整个div位于sideNav下，并且它会影响webparts的显示方式。 [它们永远延伸到整个屏幕，因为默认SP允许webparts占据其包含区域的整个宽度]。

基本上，我想要的只是内容div的背景颜色在内容溢出时伸展。

内容水平溢出时背景不显示

0 个答案: