Question

我尝试将一个Overflow：hidden / auto应用于CSS的varios类。我已经尝试过将Clear应用到各个CSS部分，到目前为止还没有去。

我只是不确定如何解决这个问题。

如果您将Codepen更改为移动设备尺寸，则会弹出汉堡包菜单，点击时会出现一个小灰框，应该覆盖整个屏幕，但它只会下降约50px左右。它曾经正常工作，但我在某个时候做了一些改变，一些东西破了，现在我似乎无法解决它。

如果上述选项之一是正确的修复，有人可以帮我找出正确的CSS（或CSS的组合），我可以将其添加到修复我的问题吗？

＆＃13;

//Variables 
var overlay = document.querySelector(".fa-bars");
var times = document.querySelector(".fa-times");
var menuSelect = document.querySelector("#hiddenNav")
var quoteFade = document.querySelector(".toggleOff")
var navScroll = document.querySelector("#navbar");


//Hamburger Menu Display Overlay
overlay.addEventListener("click", function(){
    if (times.classList.contains("closed")){
        //toggle Display property for hiddenNav
        menuSelect.classList.add("toggle");
        //FadeOut Hamburger
        overlay.classList.add("closed");
        //FadeIn X Menu
        times.classList.remove("closed");
    }
})


//Closes Out Overlay Display Menu
times.addEventListener("click", function(){
    if (overlay.classList.contains("closed")){
        //toggle Display Property for hiddenNav
        menuSelect.classList.remove("toggle");
        //FadeIn Hamburger
        overlay.classList.remove("closed");
        //FadOut X Menu
        times.classList.add("closed");
    }    
})

//Loads text after the page loads with transition
function onStart() {
    quoteFade.classList.add("toggleOn");
    quoteFade.classList.remove("toggleOff");
}

window.onload = onStart;


//Change Navbar Opacity on Scroll
window.onscroll = function (){
    if (document.body.scrollTop >= 100){
        navScroll.classList.add("colored");
        navScroll.classList.remove("transparent");
        alert("working");
    }
    else {
        navScroll.classList.add("transparent");
        navScroll.classList.remove("colored");
    }
};

＆＃13;

/* Simple Resets */
html, body {
    background-color: #fff;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: 'Raleway', sans-serif;
}


/*------------------------------------------------------------------
[1. NavBar - Primary]
*/

div.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
}

nav {
    float: left;
    width: 100%;
    outline: none;
    position: fixed;
}

/* used to make Navbar change color on Scroll */
nav.transparent {
    background-color: transparent;
}

nav.colored {
    background-color: white;
    transition: 1s;
}

nav h1 {
    padding-left: .5em;
    color: #000;
    text-transform: uppercase;
    float: left;
    font-size: 1.5em;
}

nav ul {
    list-style-type: none;
    padding: 0;
    margin: 10px;
    float: right;
}

nav ul li {
    display: inline-block;
}

nav ul li:hover {
    font-weight: bold;
    text-decoration: underline;
    transition: .7s;
}

nav ul li a {
    padding: 1em;
    color: #000;
    display: block;
    text-transform: uppercase;
    text-decoration: none;
}

i.fa-bars {
    color: blue;
    float: right;
    font-size: 28px;
    padding: 5px;
    margin-top: 20px;
    display: none;
}


/*------------------------------------------------------------------
[1.5 NavBar - Hidden Overlay]
*/

div.overlay {
    background-color: rgba(0,0,0,0.7);
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
    transition: .7s;
}

/* Allows Hidden Nav to be displayed */
div.overlay.toggle {
    display: block;
}

i.fa-times {
    color: #fff;
    font-size: 2.5em;
    padding: 5px;
    position: absolute;
    right: 30px;
    top: 20px;
    display: block;
}
/* Shuts down the FA Icons on click with JS */
i.fa-bars.closed,
i.fa-times.closed {
    display: none;
    transition: .7s;
}

div.overlay ul{
    padding: 0;
    margin: 100px 0 0 0;
    display: block;
    width: 100%;
    text-align: center;
}

div.overlay ul li {
    display: block;
}

div.overlay ul li a {
    font-size: 1.25em;
    padding: 1em;
    color: #fff;
    display: block;
    text-transform: uppercase;
    text-decoration: none;
}

/*------------------------------------------------------------------
[2 Hero Image]
*/

.hero-section {
    width: 100%;
    height: 50em;
    margin: auto;
    background: url("img/alexandru-tudorache-17852.jpg") no-repeat 50% 50%;
    display: table;
    top: 0;
    background-size: cover;
}

/*------------------------------------------------------------------
[2.5 Quote Text]
*/

#quoteBox .container-fluid {
    padding-top: 9em;
    text-align: center;    
}

.toggleOn {
    opacity: 1;
    transition: 3s;
}

.toggleOff{
    opacity: 0;
}

#content {
    height: 35em;
}

p#quote {
    max-width: 25em;
    color: white;
    text-shadow: 0 0 3px #000;
    font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
    letter-spacing: 0.1em;
    text-align: center;
    margin: 40px auto;
    text-transform: lowercase;
    line-height: 145%;
    font-size: 2.1em;
    font-variant: small-caps;
}

/*------------------------------------------------------------------
[9 Footer]
*/

footer {
    background-color: #000;
    height: 6em;
    width: 100%;
    margin: 0;
    padding: 0;
}

footer p {
    margin-bottom: .5em;
}

.social-media-contact {
    color: white;
    text-align: center;
}

.social-media-contact i {
    padding:  0 .5em;
    margin: 0px 10px;
}

.social-media-contact .fa {
    font-size: 1.5em;
}

.footerNav ul {
    text-transform: uppercase;
    list-style-type: none;
    margin-right: 3em;
}

.footerNav ul li {
    display: inline;
    color: #fff;
}

.footerNav ul li a {
    color: #fff;
    padding: .4em;
    text-decoration: none;
}

.footerNav li:not(:first-child):before {
    content: "|";
    padding: .3em;
}
/*------------------------------------------------------------------
[10 Media Queries]
*/

/* Navbar */
@media all and (max-width: 768px){
    nav ul {
        display: none;
    }
    
    i.fa-bars {
        display: block;
    }
}

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        
        <title>Marlee Branding Site</title>
        
        <!-- Google Fonts - RaleWay -->
        <link href="https://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet">
        
        <!--Font Awesome -->
        <link rel="stylesheet" href="assets/fa/css/font-awesome.css">
        
        <!-- Custom CSS -->
        <link rel="stylesheet" href="styles.css">
        
    </head>
    <body>
        <!-- Navbar -->
        <nav class="transparent" id="navbar">
            <!-- Collapsed Navbar -->
            <div class="overlay" id="hiddenNav">
                <div class="container">
                    <i class="fa fa-times closed" aria-hidden="true"></i>
                    <ul class="nav">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Now</a></li>
                        <li><a href="#">Blog</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul> <!-- End Collapse Nav -->
                </div>
            </div>
            
            <!-- Standard Navbar -->
            <div class="container" id="navbar">
                <h1>Logo</h1>
                <ul class="nav">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Now</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Contact</a></li>
                </ul> <!-- End Nav -->
                <i class="fa fa-bars" aria-hidden="true"></i>
            </div> <!-- End Container -->
        </nav><!-- End Nav -->
        
        <!-- Hero Image and Quote -->
        <section class="hero-section">
            <div class="hero-image">
                <div id="quoteBox">
                    <div class="container-fluid full toggleOff">
                        <div id="content">
                            <p id="quote">"Action is the foundational key to all success"
                            <br> &mdash; Pablo Picasso</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <footer>
            <div class="social-media-contact container">
                <p>Connect With Me</p>
                <i class="fa fa-facebook-official" aria-hidden="true"></i>
                <i class="fa fa-linkedin" aria-hidden="true"></i>
                <i class="fa fa-instagram" aria-hidden="true"></i>
                <i class="fa fa-envelope" aria-hidden="true"></i>
                <div class="footerNav">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Now</a></li>
                        <li><a href="#">Blog</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
            </div>
        </footer>
        
        
        <!-- Custom JS -->
        <script src="scripts.js"></script>
    </body>
    
</html>

＆＃13;

Answer 1

这是因为这个CSS规则：

  val hist1 = spark.read
      .format("csv")
      .option("header", "true") //reading the headers
      .load("C:/Users/MHT/Desktop/histocaisse_dte1.csv")
      .withColumn("article_id", 'article_id.cast(LongType))
      .withColumn("pos_id", 'pos_id.cast(LongType))
      .withColumn("qte", 'qte.cast(LongType))
      .withColumn("ca", 'ca.cast(DoubleType))

    hist1.show

    val hist2 = spark.read
      .format("csv")
      .option("header", "true") //reading the headers
      .load("C:/Users/MHT/Desktop/his2.csv")
      .withColumn("article_id", 'article_id.cast(LongType))
      .withColumn("date", 'date.cast(DateType))
      .withColumn("qte", 'qte.cast(LongType))
      .withColumn("ca", 'ca.cast(DoubleType))

    hist2.show

    val df3 = hist1.unionAll(hist2)
    //      
    val df4 = df3.groupBy("pos_id", "article_id").agg($"pos_id", $"article_id", max("date"), sum("qte"), sum("ca"))
    df4.show

+------+----------+----------+---+----+----------+
|pos_id|article_id|      date|qte|  ca|sale_price|
+------+----------+----------+---+----+----------+
|     1|         1|2000-01-07|  3| 3.5|      14.3|
|     2|         2|2000-01-07| 15|12.0|      13.2|
|     3|         2|2000-01-07|  4| 1.2|      14.3|
|     4|         2|2000-01-07|  4| 1.2|      12.3|
+------+----------+----------+---+----+----------+

+------+----------+----------+---+----+----------+
|pos_id|article_id|      date|qte|  ca|sale_price|
+------+----------+----------+---+----+----------+
|     1|         1|2000-01-08|  3| 3.5|      14.5|
|     2|         2|2000-01-08| 15|12.0|      20.2|
|     3|         2|2000-01-08|  4| 1.2|      17.5|
|     4|         2|2000-01-08|  4| 1.2|      18.2|
|     5|         3|2000-01-08| 15| 1.2|      11.2|
|     6|         1|2000-01-08|  2|1.25|      13.5|
|     6|         2|2000-01-08|  2|1.25|      14.3|
+------+----------+----------+---+----+----------+



    +------+----------+----------+--------+-------+
|pos_id|article_id| max(date)|sum(qte)|sum(ca)|
+------+----------+----------+--------+-------+
|     2|         2|2000-01-08|      30|   24.0|
|     3|         2|2000-01-08|       8|    2.4|
|     1|         1|2000-01-08|       6|    7.0|
|     5|         3|2000-01-08|      15|    1.2|
|     6|         1|2000-01-08|       2|   1.25|
|     6|         2|2000-01-08|       2|   1.25|
|     4|         2|2000-01-08|       8|    2.4|
+------+----------+----------+--------+-------+

删除它可以使它工作：

注意：这不是因为val df4 = df3.groupBy("pos_id", "article_id").agg($"pos_id", $"article_id", max("date"), sum("qte"), sum("ca"))，而是因为身高有限。

更好的选择是使用div.overlay { height: 100%; }（感谢G-Cyr）：

overflow

CSS：可能是崩溃的边缘？

1 个答案: