Question

有一个问题，我有两列左右，不会100％到底，它应该与约经销商部分见面。我有一个左列，一个中心列和一个右列。中心是一个充满内容的中心，左右列应该随之流动而没有任何内容。

我在最近两天对此进行了研究，并尝试了在堆栈溢出和其他网站上发现的大量不同内容，最大的区别是将html, body{ height: 100%}设置为100％以及使用{{1}在列上。这有点工作，我正在寻找一些帮助我做错了

我无法弄清楚为什么它只会降低740px并停止。

我可以发布所有代码，但是有很多代码，所以现在生病了，只是给出我正在讨论的部分。

如果需要更多信息/代码，请告诉我，以便我可以提供。

以下是托管以查看Site Here

的网站

vh

这是CSS

<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="frontDoor.css"/>

</head>
<body>

    <div class="wrapper">

    <div class="header">

    <div class="leftColumn"></div>

        <div class="centerBox">
            <div class="slideShow">
                Slide Show
            </div>
            <div class="autoSearch">
                auto Search
            </div>
            <div class="recList">
                <span><b>Recent</b></span>Listings
            </div>

            <div class="recImg">
                <img src="images/honda.png" alt="car" width="200" />
                <img src="images/honda.png" alt="car" width="200"/>
                <img src="images/honda.png" alt="car" width="200"/>
        <img src="images/honda.png" alt="car" width="200"/>                 
            </div>

            <div class="srchSell">

                <div class="srchBut">
                    <button class="button but1">SEARCH</button>
                </div>

                <div class="sellBut">
                    <button class="button but2">SELL</button>                   
                </div>                      
            </div>

            <div class="recBlog">
                <div class="blogImg">
                    <img src="images/honda.png" alt="car" width="200"/>
                </div>
                <div class="blogImg">
                    <img src="images/honda.png" alt="car" width="200"/>
                </div>
                <div class="blogImg">
                    <img src="images/honda.png" alt="car" width="200"/>
                </div>                  
            </div>

            <div class="autoNews">
            Auto news
                <hr class="style-six">
                <div class="news">
                    <img src="images/honda.png" alt="car" width="150" />
                </div>
                <div class="news">
                    <img src="images/honda.png" alt="car" width="150" />
                </div>                  
            </div>

        </div>

        <div class="rightColumn"></div>
    </div>
  </body>
 </html>

}

Answer 1

最简单的方法是将三列包装在容器DIV（我的代码段中的.wrap_3）中，并将display: flex和height: 100%应用于该容器。另外，html和body需要height: 100%才能使该高度设置正常工作。

html,
body {
  height: 100%;
  margin: 0;
}

html {
  height: 100%;
}

body {
  background-color: #222222;
  font-family: 'PT Sans Narrow', sans-serif;
}

.wrapper {
  margin: 0 auto;
  width: 960px;
  /*1688px*/
  height: 100%;
  background-color: #b3ffb3;
}

.wrap_3 {
  display: flex;
  height: 100%;
}

.leftColumn {
  width: 70px;
  border: 1px sold gray;
  background-color: #fb7;
}

.rightColumn {
  width: 70px;
  border: 1px sold gray;
  background-color: #b8f;
}

.centerBox {
  width: 820px;
  border: 1px sold gray;
  background-color: #fff;
  overflow: hidden;
}

<div class="wrap_3">
  <div class="leftColumn"></div>

  <div class="centerBox">
    <div class="slideShow">
      Slide Show
    </div>
    <div class="autoSearch">
      auto Search
    </div>
    <div class="recList">
      <span><b>Recent</b></span>Listings
    </div>

    <div class="recImg">
      <img src="images/honda.png" alt="car" width="200" />
      <img src="images/honda.png" alt="car" width="200" />
      <img src="images/honda.png" alt="car" width="200" />
      <img src="images/honda.png" alt="car" width="200" />
    </div>

    <div class="srchSell">

      <div class="srchBut">
        <button class="button but1">SEARCH</button>
      </div>

      <div class="sellBut">
        <button class="button but2">SELL</button>
      </div>
    </div>

    <div class="recBlog">
      <div class="blogImg">
        <img src="images/honda.png" alt="car" width="200" />
      </div>
      <div class="blogImg">
        <img src="images/honda.png" alt="car" width="200" />
      </div>
      <div class="blogImg">
        <img src="images/honda.png" alt="car" width="200" />
      </div>
    </div>

    <div class="autoNews">
      Auto news
      <hr class="style-six">
      <div class="news">
        <img src="images/honda.png" alt="car" width="150" />
      </div>
      <div class="news">
        <img src="images/honda.png" alt="car" width="150" />
      </div>
    </div>

  </div>

  <div class="rightColumn"></div>
</div>

列未达到所需位置

1 个答案: