1. 首页
  2. 问答
  3. 尽管使用溢出标记，但无法获取div在页面内滚动

尽管使用溢出标记，但无法获取div在页面内滚动

2013-09-26 16 views
0

我正在使用ajax调用加载内容窗格的网站。只需用一些数据快速嘲笑这一点（在我的网站上，ajax工作正常，所以这里不需要）当内容窗格溢出时，我无法滚动内容窗格 - 整个页面会滚动。尽管使用溢出标记，但无法获取div在页面内滚动

有类似于这个问题的TON，但我遇到过的每个人都没有使用溢出标签，并修复了他们的问题。我试过但没有成功。

我不知道如何让div认识到它正在溢出。到目前为止，我设法让它滚动的唯一方法是固定高度，但是我觉得这样做很差，因为根据屏幕大小，我希望它像期望的那样滚动。

这里的HTML：

<body> 
    <div id="content-container"> 
     <img src="http://i.imgur.com/69BtzId.png" alt="logo"> 
     <div class="navbar"> 
      <nav> 
       <ul> 
        <li class="homeLink"> <a href="index.html">HOME </a> 

        </li> 
        <li id="activePortfolioLink"> <a href="portfolio.html">PORTFOLIO </a> 

        </li> 
        <li class="aboutLink"> <a href="about.html">ABOUT </a> 

        </li> 
       </ul> 
      </nav> 
     </div> 
     <div id="portfolioUnderline"></div> 
    </div> 
    <div id="left"> 
     <ul class="verticalNavBar"> 
      <li id="webDesignLink"> <a>WEB DESIGN</a> 

      </li> 
      <li id="uiLink"> <a>USER INTERACTION DESIGN</a> 

      </li> 
      <li id="graphicDesignLink"> <a>GRAPHIC/ TYPOGRAPHY DESIGN</a> 

      </li> 
     </ul> 
    </div> 
    <div id="verticalLine"></div> 
    <div id="rightContent"> 
     <div class="portfolioImages"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut massa in tortor ullamcorper iaculis. Ut placerat imperdiet metus sed pellentesque. Proin iaculis erat eget fringilla lobortis. Pellentesque sit amet urna condimentum, tristique erat et, egestas ante. Duis eu pulvinar leo, fringilla posuere ligula. Nunc commodo tellus at lorem interdum feugiat. Cras varius consequat diam vitae scelerisque. Mauris nec ligula in mi accumsan scelerisque sed vel augue. Aliquam elementum, dolor id ornare feugiat, ante justo sollicitudin erat, ut gravida velit nibh vel velit. Fusce ultrices consectetur eros, ac tincidunt libero auctor ut. Quisque dapibus congue arcu sed imperdiet. Pellentesque lorem nisi, dictum sit amet libero in, cursus eleifend ante. Nunc vel euismod erat. Duis massa tellus, tincidunt in fermentum ut, sagittis vulputate lectus. Nunc ut iaculis nibh. In congue laoreet arcu commodo imperdiet. Nullam rutrum augue nec mauris rhoncus facilisis. Donec bibendum luctus magna. Vivamus tempor egestas turpis. Curabitur non porta lorem, nec elementum ante. Cras faucibus consequat augue, laoreet pretium lorem tincidunt sed. Vestibulum magna dolor, pulvinar vitae facilisis eget, posuere sit amet est. Suspendisse vel elit a neque laoreet faucibus eget et quam. Integer feugiat, tellus sit amet tempus dignissim, neque justo congue enim, quis commodo neque neque quis orci. Suspendisse scelerisque erat lobortis felis fermentum, in molestie nulla pharetra. Suspendisse lacinia ac orci et tincidunt. Duis lobortis at leo a viverra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam libero turpis, consequat non convallis at, eleifend non dolor.</br> 
       </br> 
       </br> 
       </br> 
       </br>Maecenas tincidunt lorem vitae fringilla consectetur. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet magna tincidunt, pellentesque arcu posuere, euismod lectus. Sed nec pellentesque diam, id varius quam. Praesent mattis sapien odio, in mattis dui tempus sit amet. Morbi pulvinar odio nec augue tempus varius. Sed porttitor consequat magna, sit amet lobortis mauris congue eleifend. Donec pretium elit vitae egestas rutrum. Sed sapien libero, vulputate eu lacinia sit amet, aliquam et elit. Aenean nisi mi, vulputate id nulla ut, vestibulum porta enim. Nunc quis tellus eleifend, adipiscing lorem in, congue justo. Vivamus ornare risus quis faucibus pretium. Vestibulum eu velit placerat, lacinia justo rutrum, sagittis nisi. Donec quis tincidunt justo, eu posuere mauris. Morbi eleifend, dui eget aliquet adipiscing, tellus risus hendrerit dolor, non aliquet magna sapien malesuada ante. Fusce lobortis commodo sem id tempus. Nulla eget vehicula mi, id volutpat erat. Proin sed enim egestas, rhoncus ipsum a, consectetur mi. Quisque est arcu, tempus a ligula eu, aliquam elementum quam. Sed tristique sit amet sapien eget ornare. In vitae adipiscing neque. Ut aliquet felis vitae porttitor vehicula. Morbi aliquam rhoncus lacinia. Vestibulum at viverra nisl. Donec rhoncus, dolor eu luctus egestas, magna leo consequat justo, ac venenatis odio ligula ac tortor. Nullam faucibus ante enim, vitae cursus mauris interdum ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc turpis massa, viverra vitae rutrum non, elementum sit amet orci.</p> 
     </div> 
    </div> 
</body>

这里的CSS：

* { 
    font-family:'Lato', sans-serif; 
    font-weight: lighter; 
    padding: 0; 
    margin: 0; 
    color:white; 
} 
body { 
    background: #111111; 
    height: 100%; 
} 
#content-container { 
    background-color: #111111; 
    height: 113px; 
    width: 100%; 
} 
#content-container img { 
    padding: 15px; 
    padding-top: 15px; 
    /*float: left; */ 
} 
.navbar { 
    float: right; 
    background-color: #111111; 
    font-size: 25px; 
    padding-top: 45px; 
} 
nav ul li { 
    display: inline; 
} 
nav ul li a { 
    text-decoration: none; 
    color: white; 
    padding: 15px; 
    float:right; 
} 
nav ul li.homeLink a { 
    padding-left: 41px; 
    padding-right: 43px; 
} 
nav ul li.portfolioLink a { 
    padding-left: 9px; 
    padding-right: 9px; 
    padding-bottom: 1px; 
} 
nav ul li.aboutLink a { 
    padding-left: 37px; 
    padding-right: 37px; 
} 
#activePortfolioLink a { 
    padding-left: 9px; 
    padding-right: 9px; 
    background: #0033cc; 
    font-weight: normal; 
} 
#portfolioUnderline { 
    background-color: #0033cc; 
    width: 100%; 
    height: 10px; 
    margin-top: -12px; 
} 

#left { 
    float: left; 
    width: 300px; 
    overflow: hidden; 
} 
#rightContent { 
    margin-left: 300px padding-left:300px; 
    height:100%; 
    overflow:scroll; 
} 
.verticalNavBar { 
    float: right; 
    text-align: right; 
    margin-top: 20px; 
    color: white; 
    font-size: 15px; 
} 
.verticalNavBar li { 
    list-style: none; 
    color: white; 
    padding-top:10px; 
    padding-bottom: 10px; 
} 
.verticalNavBar li a { 
    text-decoration: none; 
    color: white; 
    padding: 10px; 
} 
#verticalLine { 
    background-color: #0033cc; 
    float:left; 
    width: 10px; 
    height: 905px; 
} 
#webDesignLink a { 
    background: #0033cc; 
    font-weight: normal; 
} 

.portfolioImages { 
    margin: 0 auto; 
    padding-top: 20px; 
    padding: 10; 
    margin-right: 10%; 
    margin-left: 10%; 
    margin-bottom: 20px; 
    overflow: auto; 
} 
img.individualImage { 
    margin-left: 450px; 
} 
.portfolioImages p { 
    font-size: 15px; 
    font-weight: lighter; 
    text-align: center; 
}

下面的代码的的jsfiddle：http://jsfiddle.net/GGSSj/

感谢您的时间！

来源

2013-09-26 Dan

回答

0

您可以固定相对于屏幕尺寸的高度，但您必须修复高度/以某种方式/让它独立滚动。

这里是每个段的绝对定位的小提琴：http://jsfiddle.net/GGSSj/3/

#content-container { 
    position:absolute; top:0; left:0; width:100%; height:113px; 
} 
#left { 
    position:absolute; top:123px; bottom:0; left:0; width:300px; 
} 
#rightContent { 
    position:absolute; top:123px; bottom:0; left:310px; right:0; 
    overflow-y:scroll; 
}

来源

2013-09-26 17:45:39 andi

+0

那是什么我将不得不使用JavaScript来呢？ – Dan

+0

Milche - 开始你自己的答案！ – andi

+0

@丹 - 让我试着玩几分钟。 Milche的编辑没有做我想要的。 – andi

0

您可以修复相对于屏幕尺寸的高度，但你将有固定高度的滚动容器（不知何故与全屏高度的JavaScript）让它独立滚动。

试试看：fiddle updated here

#rightContent { 
    height: 555px; /* fit height to your needs */ 
    overflow: auto; 
}

来源

2013-09-26 17:53:43

0

你需要设置你的顶部区域，你的左边区域的位置是：固定;

http://jsfiddle.net/GGSSj/

#left { 
    position:fixed; 
    top: 113px; 
    left: 0; 
    width: 300px; 
    overflow: hidden; 
} 
#rightContent { 
    margin-left:300px; 
    padding-top:113px; 
    height:100%; 
    overflow: auto; 
} 
#content-container { 
    position: fixed; 
    background-color: #111111; 
    height: 113px; 
    width: 100%; 
}

来源

2013-09-26 17:54:28 aaronmallen

+0

这起作用。谢谢！ – Dan

+0

@丹如果您喜欢我的回答，请点击复选标记。 – aaronmallen

相关问题

 相关问题