Question 337193 in Html Question posted in
Some basic documentation can be found here.

Html – Getting the left column to stretch all the way down

I am a beginner when it comes to HTML and CSS and I’m editing this template but the issue is the left column doesn’t go all the way done, how do I fix this? its just a template I downloaded online that confuses me because they used auto generate text scripts and stuff that confused me and also this code confuses me because I can’t find out how to lower the gray left column on the side, I’ve tried looking at similar questions but they don’t look like my code, is there any way to revise or make this easier

body {
  margin: 0;
  padding: font-family: "Comic Sans MS", "Comic Sans", cursive;
  line-height: 1.5em;
}

main {
  padding-bottom: 10010px;
  margin-bottom: -10000px;
  float: left;
  width: 100%;
}

#nav {
  float: left;
  width: 230px;
  margin-left: -100%;
  padding-bottom: 10010px;
  margin-bottom: -10000px;
  background: #eee;
}

#wrapper {
  overflow: hidden;
}

#content {
  margin-left: 230px;
  /* Same as 'nav' width */
}

.innertube {
  margin: 15px;
  /* Padding for content */
  margin-top: 0;
}

p {
  color: #555;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav ul a {
  color: darkgreen;
  text-decoration: none;
}
<body>
  <div id="wrapper">
    <main>
      <div id="content">
        <div class="innertube">
          <h1>Heading</h1>
          <p>
            <script>
              generateText(30)
            </script>
          </p>
        </div>
      </div>
    </main>
    <nav id="nav">
      <div class="innertube">
        <h3>Left heading</h3>
        <ul>
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
          <li><a href="#">Link 4</a></li>
          <li><a href="#">Link 5</a></li>
          <nav id="nav">
        </ul>
      </div>
      </nav>
  </div>
</body>

i’ve tried looking up to see if other people had the same issue but my code is different so it made absolutely no sense to me

Tags:

2

Answers


  1. 0

    Let’s start with a basic redo here since you asked.
    First we use an * in the CSS to set all the margins and padding and the base font size to 16px (the default for many modern browsers) so 16px = 1em then we use em for sizing.

    Then we have a base block container where we moved the navigation up in the HTML then we use a grid to put the menu left and the content right. Menu has a min and max width and the main block just fits with 1fr. 100vh says take all the vertical; hence your menu and content take the entire view height.

    display: grid;
gap: 1em;
grid-template-columns: minmax(10em, 25%) 1fr;
grid-template-rows: 100vh;

    The main we set the header block to 4em height an center the "h1" in that.

    Lots of the rest is somewhat self explanatory.

    I put some ugly borders on just to show what is where.

    * {
  margin: 0;
  padding: 0;
  font-size: 16px;
}

body {
  font-family: "Comic Sans MS", "Comic Sans", cursive;
}

.wrapper-container {
  display: grid;
  gap: 1em;
  grid-template-columns: minmax(10em, 25%) 1fr;
  grid-template-rows: 100vh;
}

main {
  display: grid;
  grid-template-rows: 4em 1fr;
  align-items: center;
  border: solid 1px #ff00ff;
}

.content-heading {
  align-self: center;
  text-align: center;
  border: solid 1px #0000ff;
}

.content-text {
  align-self: start;
}

#nav {
  background-color: #E0E0E0;
  padding: 1em;
}

p {
  align-content: top;
  color: #555;
  border: solid 1px #0000ff;
}

nav .menu {
  list-style-type: none;
}

nav .menu .menu-link {
  color: darkgreen;
  text-decoration: none;
}
    <body>
  <div class="wrapper-container">
    <nav id="nav">
      <div class="innertube">
        <h3>Left heading</h3>
        <ul class="menu">
          <li class="menu-item"><a class="menu-link" href="#">Link 1</a></li>
          <li class="menu-item"><a class="menu-link" href="#">Link 2</a></li>
          <li class="menu-item"><a class="menu-link" href="#">Link 3</a></li>
          <li class="menu-item"><a class="menu-link" href="#">Link 4</a></li>
          <li class="menu-item"><a class="menu-link" href="#">Link 5</a></li>
        </ul>
      </div>
    </nav>
    <main>
      <h1 class="content-heading">Heading</h1>
      <div class="content-text">
        <p>
          Something here just to be text the cows can read on a rainy Tuesday.
        </p>
      </div>
    </main>
  </div>
</body>
    Login or Signup to reply.
  2. 0

    For the given code, the sidebar is set to after the main content so we move to the sidebar first and then second is the main content. I will change some of your coding that is not proper or valid and remove it. Now, as per your requirement, I will set your sidebar background to the bottom of the page using the 100vh of content height and also using the flexbox property to manage your sidebar data and main content. Use the below code to fulfill your requirements.

    body {
    margin: 0;
    padding: font-family: "Comic Sans MS", "Comic Sans", cursive;
    line-height: 1.5em;
}

main {
    width: 100%;
}

#nav {
    width: 100%;
    max-width: 230px;
    background: #eee;
}

#wrapper {
    overflow: hidden;
    display: flex;
    height: 100vh;
}

.innertube {
    padding: 15px;
}

h1,
h3 {
    margin: 0;
}

p {
    color: #555;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

nav ul a {
    color: darkgreen;
    text-decoration: none;
}
    <div id="wrapper">
    <nav id="nav">
        <div class="innertube">
            <h3>Left heading</h3>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
                <li><a href="#">Link 4</a></li>
                <li><a href="#">Link 5</a></li>
            </ul>
        </div>
    </nav>
    <main>
        <div id="content">
            <div class="innertube">
                <h1>Heading</h1>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
            </div>
        </div>
    </main>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search