当flex：1有效固定侧边栏不会保持固定

时间：2019-10-19 17:17:14

标签： html css flexbox

我正在学习Flexbox，并尝试通过创建演示产品组合来实现。

我尝试过此answer来创建固定的侧边栏。然后，我尝试使用flex使我的投资组合的各个维度相同：1，最初它不起作用，然后我发现了这个answer，但它也不起作用。

var myDate = new Date();
var hrs = myDate.getHours();

var greet;

if (hrs < 12)
  greet = 'Good Morning';
else if (hrs >= 12 && hrs <= 17)
  greet = 'Good Afternoon';
else if (hrs >= 17 && hrs <= 24)
  greet = 'Good Evening';

document.getElementById('greet').innerHTML =
  greet + ', visitor! <br><br> Welcome.';
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Comfortaa', sans-serif;
  font-size: 1.4em;
}

.container {
  display: flex;
  flex-flow: row nowrap;
  height: 100vh;
}

.sidebar {
  flex-basis: 25%;
  background-color: #bbbbeb;
  display: flex;
  flex-flow: column;
  padding: 10px;
}

.logo {
  text-align: center;
  font-weight: bold;
}

.navbar {
  margin: auto;
}

.content-container {
  flex-basis: 75%;
  display: flex;
  flex-flow: column nowrap;
  text-align: center;
  overflow: auto;
  height: 100vw;
}

section {
  padding: 10px;
}

.home {
  background-color: red;
  flex: 1;
}

.about {
  background-color: orange;
  flex: 1;
}

.skills {
  background-color: orangered;
  flex: 1;
}

.contact {
  background-color: crimson;
  flex: 1;
}

li {
  list-style: none;
  margin: 10px 0;
  text-align: center;
}

a {
  color: black;
  display: inline-block;
  padding: 2px;
  text-decoration: none;
}

a:hover {
  transform: scale(1.2);
  font-weight: bold;
  border-bottom: 3px solid black;
  text-shadow: 1px 1px 2px rgb(122, 71, 122);
}
<div class="container">
  <section class="sidebar">
    <div class="logo"><a href="#home">&lt;logo&gt;</a></div>
    <nav class="navbar">
      <ul class="nav-links">
        <li><a href="#home">home</a></li>
        <li><a href="#about">about me</a></li>
        <li><a href="#skills">skills</a></li>
        <li><a href="#contact">contact</a></li>
      </ul>
    </nav>
  </section>

  <main class="content-container">
    <section class="home" id="home">
      <h2 id="greet"><span></h2>
                </section>

                <section class="about" id="about">
                    <h2>ABOUT</h2>
                    <h3>
                        <span>Name</span>
        </h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    </section>

    <section class="skills" id="skills">
      <h2>SKILLS</h2>
      <h3>Lorem ipsum dolor sit amet.</h3>
      <ul class=tech-skills>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
      <h3>Lorem</h3>
      <ul class="languages">
        <li>1</li>
        <li>2</li>
      </ul>
      <h3>Lorem, ipsum.</h3>
      <ul class="learning-skills">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ul>
    </section>

    <section class="contact" id="contact">
      <h2>CONTACT</h2>
      <p>handle</p>
      <p>phone</p>
      <p>email</p>
    </section>
  </main>
</div>

如您在CSS中所见，.content-container的高度为100vw（如果我将其更改为100vh，则flex:1，.home，{{1}内的.about }和.skills不起作用，但是使用100vw作为高度时，.contact可以工作，但固定的侧边栏不再保持固定。

是否由于flex:1上的flex-flow: column nowrap而发生？

3 个答案:

答案 0 :(得分：0)





<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width initial-scale=1.0">
    <link rel="stylesheet" href="css/flexbox.css">
    <link href="https://fonts.googleapis.com/css?family=Comfortaa&display=swap"    
rel="stylesheet">
    <title>Flexbox</title>
</head>

<body>
    <div class="container">
        <section class="sidebar">
            <div class="logo"><a href="#home">&lt;logo&gt;</a></div>
            <nav class="navbar">
                <ul class="nav-links">
                    <li><a href="#home">home</a></li>
                    <li><a href="#about">about me</a></li>
                    <li><a href="#skills">skills</a></li>
                    <li><a href="#contact">contact</a></li>
                </ul>
            </nav>
        </section>

        <main class="content-container">
            <section class="home" id="home">
                <h2 id="greet"><span></h2>
            </section>

            <section class="about" id="about">
                <h2>ABOUT</h2>
                <h3>
                    <span>Name</span>
                </h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
            </section>

            <section class="skills" id="skills">
                <h2>SKILLS</h2>
                <h3>Lorem ipsum dolor sit amet.</h3>
                <ul class=tech-skills>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                </ul>
                <h3>Lorem</h3>
                <ul class="languages">
                    <li>1</li>
                    <li>2</li>
                </ul>
                <h3>Lorem, ipsum.</h3>
                <ul class="learning-skills">
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                </ul>
            </section>

            <section class="contact" id="contact">
                <h2>CONTACT</h2>
                <p>handle</p>
                <p>phone</p>
                <p>email</p>
            </section>
        </main>
    </div>
</body>
</html>

答案 1 :(得分：0)

  

如您在CSS中所见，.content-container的高度为100vw（如果我将其更改为100vh，则flex:1，.home，{{1}内的.about }和.skills不起作用，但是使用100vw作为高度时，.contact可以工作，但固定的侧边栏不再保持固定。

     

是否由于flex:1上的flex-flow: column nowrap而发生？

不。之所以发生这种情况，是因为您正在弄乱不同轴上的高度，甚至不需要增加高度（在下面进行说明），并且是因为您违反了弹性最小尺寸算法。

使用.content-container时，100vw的高度是相对于视口的宽度（“视口宽度”）。相对于容器的实际高度，这会产生高度误差。在更宽的视口中，高度会更高，但是.content-container仍无法使每个项目都具有相同的高度（以下说明）。另外，当您缩小视口时，flex: 1会逐渐消失（因为.content-container的高度不断减小）。

使用vw时，100vh的高度是相对于视口的高度（“视口高度”）。您的子元素的高度仍将与.content-container不相等（以下说明）。

基本上，在两种情况下（flex: 1和vw）vh都无法实现您的目标。这是因为flex items cannot be smaller than their content along the main axis。在列方向容器中，默认值为flex: 1。您需要使用min-height: auto或min-height: 0用可见值以外的任何其他值覆盖默认值。

此外，由于弹性项目的默认设置为align-items: stretch，因此您无需为overflow添加高度。它将自动在容器的整个高度上展开。

.content-container
var myDate = new Date();
var hrs = myDate.getHours();

var greet;

if (hrs < 12)
  greet = 'Good Morning';
else if (hrs >= 12 && hrs <= 17)
  greet = 'Good Afternoon';
else if (hrs >= 17 && hrs <= 24)
  greet = 'Good Evening';

document.getElementById('greet').innerHTML =
  greet + ', visitor! <br><br> Welcome.';
.container {
  display: flex;
  height: 100vh;
}

.sidebar {
  flex: 0 0 25%;
  background-color: #bbbbeb;
  display: flex;
  flex-flow: column;
  padding: 10px;
}

.logo {
  text-align: center;
  font-weight: bold;
}

.navbar {
  margin: auto;
}

.content-container {
  flex: 0 0 75%;
  display: flex;
  flex-flow: column nowrap;
  text-align: center;
  overflow: auto;
  /* height: 100vh */
}

section {
  padding: 10px;
}

.home {
  background-color: red;
  flex: 1;
  min-height: 0; /* new */  
}

.about {
  background-color: orange;
  flex: 1;
  overflow: hidden; /* new */  
}

.skills {
  background-color: orangered;
  flex: 1;
  overflow: auto; /* new */  
}

.contact {
  background-color: crimson;
  flex: 1;
  min-height: 0; /* new */  
}


li {
  list-style: none;
  margin: 10px 0;
  text-align: center;
}

a {
  color: black;
  display: inline-block;
  padding: 2px;
  text-decoration: none;
}

a:hover {
  transform: scale(1.2);
  font-weight: bold;
  border-bottom: 3px solid black;
  text-shadow: 1px 1px 2px rgb(122, 71, 122);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Comfortaa', sans-serif;
  font-size: 1.4em;
}

jsFiddle demo

答案 2 :(得分：-1)

你的意思是这样吗？

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Comfortaa', sans-serif;
  font-size: 1.4em;
}

.container {
  display: flex;
  flex-flow: row nowrap;
  height: 100vh;
}

.sidebar, .sidebar--placeholder {
  flex-basis: 25%;
  background-color: #bbbbeb;
  display: flex;
  flex-flow: column;
  padding: 10px;
}

.sidebar {
  position: fixed;
  width: 25vw;
  height: 100vh;
}

.logo {
  text-align: center;
  font-weight: bold;
}

.navbar {
  margin: auto;
}

.content-container {
  flex-basis: 75%;
  display: flex;
  flex-flow: column nowrap;
  text-align: center;
  overflow: auto;
  height: 100vw;
}

section {
  padding: 10px;
  flex: 1 1;
  height: 0;
  overflow: hidden;
}

.home {
  background-color: red;
}

.about {
  background-color: orange;
}

.skills {
  background-color: orangered;
}

.contact {
  background-color: crimson;
}

li {
  list-style: none;
  margin: 10px 0;
  text-align: center;
}

a {
  color: black;
  display: inline-block;
  padding: 2px;
  text-decoration: none;
}
 
a:hover {
  transform: scale(1.2);
  font-weight: bold;
  border-bottom: 3px solid black;
  text-shadow: 1px 1px 2px rgb(122, 71, 122);
}
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width initial-scale=1.0">
        <link rel="stylesheet" href="style.css">
        <link href="https://fonts.googleapis.com/css?family=Comfortaa&display=swap" rel="stylesheet">
        <title>Flexbox</title>
    </head>

    <body>
        <div class="container">
            <section class="sidebar--placeholder"></section>
            <section class="sidebar">
                <div class="logo"><a href="#home">&lt;logo&gt;</a></div>
                <nav class="navbar">
                    <ul class="nav-links">
                        <li><a href="#home">home</a></li>
                        <li><a href="#about">about me</a></li>
                        <li><a href="#skills">skills</a></li>
                        <li><a href="#contact">contact</a></li>
                    </ul>
                </nav>
            </section>

            <main class="content-container">
                <section class="home" id="home">
                    <h2 id="greet"><span></h2>
                </section>

                <section class="about" id="about">
                    <h2>ABOUT</h2>
                    <h3>
                        <span>Name</span>
                    </h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                </section>

                <section class="skills" id="skills">
                    <h2>SKILLS</h2>
                    <h3>Lorem ipsum dolor sit amet.</h3>
                    <ul class=tech-skills>
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                    </ul>
                    <h3>Lorem</h3>
                    <ul class="languages">
                        <li>1</li>
                        <li>2</li>
                    </ul>
                    <h3>Lorem, ipsum.</h3>
                    <ul class="learning-skills">
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                    </ul>
                </section>

                <section class="contact" id="contact">
                    <h2>CONTACT</h2>
                    <p>handle</p>
                    <p>phone</p>
                    <p>email</p>
                </section>
            </main>
        </div>
    </body>
</html>

<script>
    var myDate = new Date();
    var hrs = myDate.getHours();

    var greet;

    if (hrs < 12)
        greet = 'Good Morning';
    else if (hrs >= 12 && hrs <= 17)
        greet = 'Good Afternoon';
    else if (hrs >= 17 && hrs <= 24)
        greet = 'Good Evening';

    document.getElementById('greet').innerHTML =
        greet + ', visitor! <br><br> Welcome.';
</script>

相关问题
最新问题