0

我正在制作一个使用 ajax 调用来加载内容窗格的网站。只是用一些数据快速模拟它，（在我的网站上，ajax 工作正常，所以这里不需要）我无法让内容窗格在溢出时滚动 - 整个页面滚动。

有很多与此类似的问题，但我遇到的每个问题都没有使用溢出标签，它解决了他们的问题。我已经尝试过了，但没有成功。

我不知道如何让 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;
}

Here's a jsfiddle of the code: http://jsfiddle.net/GGSSj/

Thanks for your time!

4

3 回答 3

0

You can fix the height in relation to the screen size, but you have to fix the height /somehow/ to get it to scroll independently.

Here is a fiddle with absolute positioning of each segment: 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-26T17:45:39.840 回答
0

You can fix the height in relation to the screen size, but you will have to fix the height the scrollable container (somehow with javascript for full screen height) to get it to scroll independently.

Give it a try : fiddle updated here

#rightContent {
  height: 555px; /* fit height to your needs */
  overflow: auto;
}
于 2013-09-26T17:53:43.397 回答
0

You need to set your top area and your left area to position:fixed;

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-26T17:54:28.347 回答