Question

我正在尝试将一些媒体查询添加到我的主页。当我调整页面大小时，整个部分都会被切断。该部分直接位于标题下方，并包含一个背景图像，其顶部有一个图像，也是a标记。在该部分的脚下有一个小的条形部分（.showreel）也消失了。

这是该部分的CSS -

/* HOME PAGE */

section#home {

    height: 400px;

    background: url(../images/homepagemain.jpg) center center no-repeat;
    background-size: 100%;
    background-position: center;
    overflow: hidden;

    position: relative;
}

#agencyimage {

    position: absolute;
    margin: 0;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);

}



.showreel {
  height: 50px;
  max-width: 100%;
  position: absolute;
  background-color: black;
  bottom: 0;
  padding: 0 30px;
  justify-content: space-between;
}

.showreel, .showreel > div.seemore {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex:1;
}
.showreel, .showreel > div.seeour {
    justify-content: flex-end;
    flex:1;
    display: flex;
    align-items: center;
}

.showreel p {
  font-size: 15px;
  font-weight: normal;
  margin: 0;
  padding-left: 10px;
  color: #ffffff;
}

.showreel i {
  color: #ffffff;
}

.seemore  {
  margin-left: 30px;
}


.seeour i {
  margin-right: 30px;
}

HTML

<section id="home">

        <a href="agency.html"><img src="images/AGENCY-BUSINESS.png" id="agencyimage" style="width: 150px; height: 250px;"></a>

        <div class="container showreel">
            <div class="seemore">
                <span class="fa-stack fa-lg">
                    <i class="fa fa-circle fa-stack-2x" style="color:#fff"></i>
                    <i class="fa fa-chevron-down fa-stack-1x" style="color: #000000;"></i>
                </span>
                <p>SEE MORE</p>
            </div>
            <div class="seeour">
                <p>SEE OUR SHOWREEL</p>
                <i class="fa fa-play-circle fa-3x" aria-hidden="true"></i>
            </div>
        </div>
    </section>

对于我的媒体查询，我已经把它 -

@media screen and (max-width: 1000px) {
  div.container {
    float: none;
    margin: 0 20px 0 20px;
  }

  div.column {
    float: none;
    width: 50%;
  }
}

@media screen and (max-width: 480px) { 


  header {
    float: none;
    height: auto;
    position: relative;
  }

  nav {
    float: none;
    text-align: center;
    padding-bottom: 10px;
    padding-top: 10px;
  }

  nav a {
    display: block;

  } 



  section#home {
    float: none;
    height: auto;
    background-size: 100%;
  }

  section#home a {
    position: relative;
  }

我认为这可能与位置绝对/相对样式有关，但我无法弄明白。我尝试了各种各样的变化，但没有 - 显然我缺少一些基本但却无法解决的问题。任何帮助将不胜感激。

Answer 1

发生的事情是正常的。对于480像素或更低的断点，您可以将section#home的高度更改为auto，但这会为此元素提供高度0，因为在您内部使用position:absolute定位元素。与此同时，您overflow:hidden section#home，因此任何内容实际上都是隐藏的。

您可以将固定高度设置为section#home或将position:absolute更改为position:relative或position:static以获取内部元素，然后从该点开始继续开发。

Answer 2

问题是你给＃section home：auto。

在如下部分设置固定高度：

CREATE PROCEDURE AddNewMaterialType4 
     (@category varchar(15), 
      @materialType varchar(50),
      @userID varchar(15), 
      @result1 varchar(15) OUTPUT)
AS
    DECLARE @count1 INT;
    SET @count1 = 0;

    SELECT @count1 = COUNT(*) 
    FROM [vmsMaterialType]
    WHERE category = @category 
      AND materialType = @materialType;

    IF @count1 = 0
    BEGIN
        SET NOCOUNT ON;

        INSERT INTO [vmsMaterialType] ([category], [materialType],[createdBy])
        VALUES (@category, @materialType, @userID);

        SET @result1 = 'Success';
    END
    ELSE
       SET @result1 = 'Fail';
GO

CSS - 重新调整页面大小时整个部分消失

2 个答案: