定位在高度为100％和宽度为100％的部分内

如何正确定位“组合”部分，以便它不会落在“联系人”部分后面，并且根据“联系人”部分的大小进行伸展和缩小屏幕（就像照片背景）？它可以只用CSS和percantages完成吗？我尝试了许多不同的组合，但没有成功。定位在高度为100％和宽度为100％的部分内

每个部分的高度始终为100％。宽度也是如此。

http://jsfiddle.net/zwwve/9/

<section id="home" class="photobg"> 
     <div class="inner"> 
       <div class="copy"> 
        <h1>Home</h1> 
        <p>Some text here!</p> 
       </div> 
     </div> 
</section>

来源

2013-06-27 C. Felipe

这是一个粗略的想法：http://jsfiddle.net/derekstory/zwwve/17/

对于取消隐藏的部分业务，把一个div包裹在其周围。没有需要包装的CSS。

对于缩放，您将希望删除图库宽度。也许放一个最小宽度。

.gallery { 
    min-width: 500px; 
    margin-left: auto; 
    margin-right: auto; 
}

对于投资组合，您还可以给他们一个百分比和一个最小宽度。

.project { 
    display: inline; 
    float: left; 
    height: auto; 
    position: relative; 
    width: 20%; 
    min-width: 120px; 
    margin-top: 40px; 
    margin-left: 40px; 
    margin-right: 20px; 
}

它粗糙但基本的想法。

来源

2013-06-27 16:03:22

谢谢。这是一个缩放的过程，但我的投资组合部分仍然落后于联系人部分。这使我疯狂：（ –

http://jsfiddle.net/derekstory/zwwve/17/你可能想减小投资组合项目的大小。也许给他们一个最小和最大的宽度。 –

我看到你添加了最小a max宽度可以提高这个数量是否可以向#pagetwo的高度和宽度添加一个百分比值？灰色框架可以比投资组合部分的白色容器更小，只要灰色框架粘在投资组合的白色内部就可以了 –

您对.gallery类的固定宽度已更改为100％，现在这些项目随着屏幕尺寸的减小而下降。

我也改变了联系div的位置和底部，所以它可以在底部。

JSFIDDLE

添加/更改CSS：

.gallery { 
    width: 100%; 
    margin-left: auto; 
    margin-right: auto; 
} 

#contact{ 
    position: relative; 
    top: 1000px; 
}

来源

2013-06-27 16:25:12 designtocode

感谢您参与此处。我检查了你的小提琴，但是现在投资组合部分太大了，当我拉伸或缩小它时，它并不遵循浏览器的大小（例如它与主页的比如： –

定位在高度为100％和宽度为100％的部分内

回答

相关问题