Question

我正在学习编写Web开发代码并使用我的个人摄影网站进行练习。我遇到了一个我无法找到解决方案的元素定位的挑战。

以下是一些背景信息：网站的“正文”部分最小尺寸为900x600像素，以避免我的图像极度缩小。当Web浏览器小于指定的最小尺寸时，将隐藏溢出。在网站的左下角（在侧边栏div中）有一个包含版权信息的小div。我希望它显示在侧边栏的底部并调整其位置，因为窗口调整大小以保持在侧边栏的底部。我使用绝对定位实现了这一点。（见视频演示）

这是我的问题：我希望div（#copyright）在浏览器窗口调整大小时向上移动侧边栏，但只有在它位于我的菜单下方之前。此时，如果用户继续缩小浏览器窗口，我希望div＃copyright隐藏在网站溢出的其余部分。我目前配置我的网站的方式，div＃版权继续维持它的绝对位置，重叠文本。

我无法在互联网上找到解决方案，部分原因是因为我不知道从哪里开始。我最初的想法是使用javascript将div＃copyright的位置更改为relative或者只是在它开始重叠菜单时隐藏它。但我必须认为有一个更优雅，更简单的CSS解决方案。

有什么想法吗？

德雷克

以下是相关的HTML代码：

<div id="sidebar">

    <div id="title" onclick="navigate('frameHome')">
        <span id="drake">DRAKE</span><br>WITHERS
    </div>

    <div id="contact">drake@drakewithers.com<br>(330) 690-5176<br>Athens, OH</div>

    <nav>
        <ul class="menu">
            <li class="sidebarHeading">PROJECTS</li>
            <li class="sidebarEntry" onclick="navigate('frameBoxcarSlideshow')">The Boxcar Studios (Slideshow)</li>
            <li class="sidebarEntry" onclick="navigate('frameBoxcarPortraits')">The Boxcar Studios (Portraits)</li>
        </ul>
        <ul class="menu">
            <li class="sidebarHeading">OTHER WORK</li>
            <li class="sidebarEntry" onclick="navigate('frameStreetscapes')">Streetscapes: Provo, UT</li>
        </ul>
        <ul class="menu" id="menuAbout">
            <li class="sidebarEntry"><a href="http://drakewithers.wordpress.com" style="display:block">Blog</a></li>
            <li class="sidebarEntry" onclick="navigate('frameAbout')">About</li>
        </ul>

    </nav>

    <div id="copyright">
        Site under construction.<br>&copy; Drake S. Withers, 2017           
    </div>

</div>

相关CSS：

body {
width: 100%;    
height: 100%;
margin: 0;
padding: 0;
font-family: 'Serif';
font-size: 13px;
line-height: 1.5;
overflow: hidden;
min-width: 900px;
min-height: 600px;
}

#sidebar {
position: fixed;
height: 100%;
width: 250px;
text-align: right;
}

#copyright {
position: absolute;
left: 0;
bottom: 60px;
width: 200px;
padding: 5px 10px 5px 30px;
text-align: right;
border-bottom: 3px #e6e6e6 solid;
border-top: 3px #e6e6e6 solid;
}

视频示例： https://youtu.be/S7Ua8uatILE

实例： http://drakewithers.com

Answer 1

有很多方法，但这里只有一个。

#sidebar {
    display: flex;
    flex-direction: column;
}

#copyright {
    /* position: absolute; */
    /* bottom: 0px; */
    /* bottom: 0; */
    /* display: flex; */
    margin-top: auto;
    width: 200px;
    padding: 5px 10px 5px 30px;
    text-align: right;
    border-bottom: 3px #e6e6e6 solid;
    border-top: 3px #e6e6e6 solid;
}

Answer 2

你的侧边栏看起来非常一致。您可以使用max-height媒体查询：

@media(max-height: 663px) {
    #copyright {
        position: static;
    }
}

限制绝对位置的移动

2 个答案: