Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/80.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 潜水艇被切断了?_Javascript_Html_Css - Fatal编程技术网

Javascript 潜水艇被切断了?

Javascript 潜水艇被切断了?,javascript,html,css,Javascript,Html,Css,我现在遇到了一个问题,当我将任何元素插入到div中时,我的缩放会停止,而大多数div都会被切断。当我插入两个新元素时会发生这种情况 我也尝试过改变页面大小调试打印多个东西,看看是什么影响了这一点,但我似乎不明白为什么它只是随机停止工作 没有4个新元素: 有4个新元素: JSON目录: var Product = { Name: Name, BuyPrice: BuyPrice,

我现在遇到了一个问题,当我将任何元素插入到div中时,我的缩放会停止,而大多数div都会被切断。当我插入两个新元素时会发生这种情况

我也尝试过改变页面大小调试打印多个东西,看看是什么影响了这一点,但我似乎不明白为什么它只是随机停止工作

没有4个新元素:

有4个新元素:

JSON目录:

            var Product = {
                Name: Name,
                BuyPrice: BuyPrice,
                SellPrice: SellPrice,
                ProfitMargin: ProfitMargin,
                Demand: Demand,
                Volume: Inflation,
            }
Javascript:

            var Product = ProfitDescending[i]

            var Product = ProfitDescending[i]
            var Div = document.createElement("div")
            Div.id = Product.Name
            Div.className = "Product"
            document.getElementById("Products").appendChild(Div)

            var NameText = document.createElement("h1")
            NameText.id = "NameText"
            NameText.textContent = FixName(Product.Name)
            document.getElementById(Product.Name).appendChild(NameText)

            var ProfitMarginText = document.createElement("p")
            ProfitMarginText.id = "ProfitText"
            ProfitMarginText.textContent = "Profit: " + AbbreviateNumber(parseInt(Product.ProfitMargin),1)
            document.getElementById(Product.Name).appendChild(ProfitMarginText)

            var BuyPriceText = document.createElement("p")
            BuyPriceText.id = "BuyPriceText"
            BuyPriceText.textContent = "Buy Price: " + AbbreviateNumber(parseInt(Product.BuyPrice),1)
            document.getElementById(Product.Name).appendChild(BuyPriceText)

            var SellPriceText = document.createElement("p")
            SellPriceText.id = "SellPriceText"
            SellPriceText.textContent = "Sell Price: " + AbbreviateNumber(parseInt(Product.SellPrice),1)
            document.getElementById(Product.Name).appendChild(SellPriceText)

            //4 new elements below (Above works fine)

            var DemandTitleText = document.createElement("h1")
            DemandTitleText.id = "DemandTitleText"
            DemandTitleText.textContent = "Demand:"
            document.getElementById(Product.Name).appendChild(DemandTitleText)

            var DemandText = document.createElement("p")
            DemandText.id = "DemandText"
            DemandText.textContent = Product.Demand
            DemandText.style.color = Colors[Product.Demand][0]
            document.getElementById(Product.Name).appendChild(DemandText)

            var VolumeTitleText = document.createElement("h1")
            VolumeTitleText.id = "VolumeTitleText"
            VolumeTitleText.textContent = "Volume:"
            document.getElementById(Product.Name).appendChild(VolumeTitleText)

            var VolumeText = document.createElement("p")
            VolumeText.id = "VolumeText"
            VolumeText.textContent = Product.Demand
            VolumeText.style.color = Colors[Product.Volume][0]
            document.getElementById(Product.Name).appendChild(VolumeText)
CSS:


我意识到我没有使用边距和添加边距顶部解决了我的问题。

为什么你的身体有固定的高度?这肯定会引起问题
body {
    background-color: rgb(40, 40, 40);
    overflow-x: hidden;
    height: 20000px;
}

#Logo {
    width: 250px;
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 1;
}

#AngledDiv {
    position: absolute;
    width: 120%;
    left: -50px;
    top: -50px;
    height: 620px;
    transform: rotate(-2deg);
    background-color: rgb(50, 50, 50);
}

#Products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    overflow: hidden;
    position: absolute;
    width: 1200px;
    height: 20000px;
    top: 430px;
    left: 50%;
    margin-left: -600px;
}

.Product {
    background-color: rgb(60, 60, 60);
    border-radius: 5px;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05)!important;
}

#NameText {
    position: relative;
    font-weight: 600;
    top: -15px;
    left: 10px;
    font-family: Montserrat,system-ui;
    font-size: 26px;
    color: #FFAA00;
}

#ProfitText {
    position: relative;
    margin-top: -15px;
    left: 10px;
    font-family: Montserrat,system-ui;
    font-weight: 450;
    font-size: 24px;
    color: white;
}

#BuyPriceText {
    position: relative;
    margin-top: -20px;
    left: 10px;
    font-family: Montserrat,system-ui;
    font-weight: 450;
    font-size: 24px;
    color: rgb(180, 180, 180);
}

#SellPriceText {
    position: relative;
    margin-top: -28px;
    left: 10px;
    font-family: Montserrat,system-ui;
    font-weight: 450;
    font-size: 24px;
    color: rgb(180, 180, 180);
}

#DemandTitleText {
    position: relative;
    font-weight: 350;
    top: -15px;
    left: 10px;
    font-family: Montserrat,system-ui;
    font-size: 26px;
    color: white;
}

#DemandText {
    position: relative;
    font-weight: 350;
    top: -74px;
    left: 118px;
    font-family: Montserrat,system-ui;
    font-size: 26px;
    color: white;
}