Question

我一直working on a self-project使用可用的JSON数据复制reddit page for javascript。但我无法复制header section中原始网站的行为，其中header具有响应性（屏幕尺寸减小时的行为）。

GIF : how the original website header section works

问题：

重叠右侧（登录页面选项）。重叠是指文本后面的 未显示 。我已设法执行重叠，但由于divs的背景为translucent，因此文本背后的 也是如此显示的即可。想不出任何解决方案。

GIF : my header (behind text seen)

当空间不足时navbar elements超越。这不是原作中的原因，它们被more和Login section隐藏起来。我无法弄清楚如何在单行中使用它。

GIF : my header (header elements move down)

一个较小的，类似的样本代码段：

.custom-header-full{
    background: rgba(255,255,0,1);
}

/* Top */
.custom-top-header-container{
    background: rgba(0,0,0,0.7);       /* translucent */
    position:absolute;
    top:0;
    width: 100%;
}
#top-right-div{
    position: absolute;
    right: 0;
    z-index: 1000;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      rel="stylesheet"/>

<div class="navbar navbar-static-top custom-header-full">

    <!-- TOPMOST header with Links and Login/Signup -->
    <div class="navbar-header custom-top-header-container">
        <!-- Left side with various links -->
        <div id="top-left-div">
            <a class="navbar-brand" href="#">MY SUBREDDITS ▼</a>
            <a class="navbar-brand" href="#">POPULAR</a>
            <a class="navbar-brand" href="#">ALL</a>
            <a class="navbar-brand" href="#">RANDOM</a>
        </div>

        <!-- Login/Signup on the right -->
        <div id="top-right-div">
            <span class="navbar-brand">Want to join?
                <a href="#">Log in or sign up</a>
                in seconds |
                <button class="glyphicon glyphicon-wrench tools-icon"></button>
            </span>
        </div>

    </div>
</div>

如果您想查看full project, the link on Github。

要注意的一个有趣点：，标题中，左侧titles与右侧section重叠。因此，这是一个平滑的交易，其中可能的情况是，当重叠时，即使 部分文本也会在标题中看到 。基本上它不是要使标题元素在宽度上不可见，因为这会使整个title不可见。

前：

标题有TODAYIL
标题有TODAYILEARNED（整个标题）

Answer 1

如果您能够使用CSS flexbox，我认为此解决方案可以按您希望的方式运行：

.custom-header-full{
    background: rgba(255,255,0,1);
}

/* Top */
.custom-top-header-container{
    background: rgba(0,0,0,0.7);       /* translucent */
    position:absolute;
    top:0;
    width: 100%;
    display: flex;
}
#top-left-div {
    flex: 1 1 0%;
    overflow: hidden;
    display: flex;
    white-space: nowrap;
}
#top-right-div{
    flex: 0 0 auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      rel="stylesheet"/>

<div class="navbar navbar-static-top custom-header-full">

    <!-- TOPMOST header with Links and Login/Signup -->
    <div class="navbar-header custom-top-header-container">
        <!-- Left side with various links -->
        <div id="top-left-div">
            <a class="navbar-brand" href="#">MY SUBREDDITS ▼</a>
            <a class="navbar-brand" href="#">POPULAR</a>
            <a class="navbar-brand" href="#">ALL</a>
            <a class="navbar-brand" href="#">RANDOM</a>
        </div>

        <!-- Login/Signup on the right -->
        <div id="top-right-div">
            <span class="navbar-brand">Want to join?
                <a href="#">Log in or sign up</a>
                in seconds |
                <button class="glyphicon glyphicon-wrench tools-icon"></button>
            </span>
        </div>

    </div>
</div>

我做了什么：

制作.custom-top-header-container display:flex以确保左右显示并排显示。
让#top-right-div只占用其内容所需的空间（即不会增长或缩小）
让#top-left-div填充容器中剩余的任何空间，并使用overflow:hidden隐藏任何可能在小宽度上与#top-right-div重叠的内容。
将#top-left-div设置为white-space: nowrap以防止带有空格的链接（例如“我的Subreddits”）在屏幕缩小得足够小时分成多行。

Answer 2

我设法实现了一个纯CSS解决方案，没有我认为你想要的flex。

我将重点介绍我所做的一些改变（那些与问题没有直接关系并因此可能被忽视的改变）：

摆脱.navbar，.navbar-static-top，.navbar-header，.custom-header-full和.custom-top-header-container。如果您真的需要这些课程，请找到一种在您自己的时间覆盖行为的方法。如果证明太困难，我可以尝试提供帮助。
从源代码中删除了CAPS LOCK，并将其替换为CSS文件中的text-transform: uppercase;。如果在添加新的导航链接时碰巧入睡，这对将来真的有帮助。
用HTML实体（▼）替换“▼”。现代浏览器通常不关心，但它仍然是很好的做法。

这是最终结果的Fiddle。如果您有任何问题，请告诉我。

Answer 3

我猜，有点黑客可以帮到你。尝试进行这些CSS更改：

#top-right-div {
    position: absolute;
    right: 0px;
    z-index: 1000;
    background: rgba(255,255,0,1);
}

并将background: rgba(0, 0, 0, 0.7);添加到html中.navbar-brand下的top-right-div。

这会产生你想要达到的幻想。

.custom-header-full{
    background: rgba(255,255,0,1);
}

/* Top */
.custom-top-header-container{
    background: rgba(0,0,0,0.7);       /* translucent */
    position:absolute;
    top:0;
    width: 100%;
    display: flex;
}
#top-left-div {
    flex: 1 1 0%;
    overflow: hidden;
    display: flex;
    white-space: nowrap;
}
#top-right-div{
    flex: 0 0 auto;
    background: rgba(255,255,0,1);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      rel="stylesheet"/>

<div class="navbar navbar-static-top custom-header-full">

    <!-- TOPMOST header with Links and Login/Signup -->
    <div class="navbar-header custom-top-header-container">
        <!-- Left side with various links -->
        <div id="top-left-div">
            <a class="navbar-brand" href="#">MY SUBREDDITS ▼</a>
            <a class="navbar-brand" href="#">POPULAR</a>
            <a class="navbar-brand" href="#">ALL</a>
            <a class="navbar-brand" href="#">RANDOM</a>
        </div>

        <!-- Login/Signup on the right -->
        <div id="top-right-div">
            <span class="navbar-brand" style="background: rgba(0, 0, 0, 0.7);">Want to join?
                <a href="#">Log in or sign up</a>
                in seconds |
                <button class="glyphicon glyphicon-wrench tools-icon"></button>
            </span>
        </div>

    </div>
</div>

Answer 4

对于重叠，你可以使用这种风格：

.custom-header-full{
    background: rgba(255,255,0,1);
}

/* Top */
.custom-top-header-container{
    background: rgba(0,0,0,0.7); 
    position:absolute;
    top:0;
    width: 100%;
}
#top-right-div {
    width: 45%;
    float: left;
}

#top-left-div {
    display: inline-block;
    width: 53%;
    float: left;
}

赞：demo

和其他可以使用媒体查询的设备如：

 @media (min-width:0px) and (max-width:799px) { add style  }

根据设备写样式。

我觉得它对你很有帮助。

Answer 5

处理拉伸问题。尝试使用响应选项检查网站

responsive button

然后，当文本重叠或导航栏为两行高时，您可以知道屏幕的尺寸

get the width

最后，您可以添加媒体查询以创建与桌面网站的差异。如果是450px

@media only screen and (max-width: 450px) {
    /* Add your css specification here. */
}

在响应式网站中重叠半透明div

5 个答案: