CODEWITHSUNDEEP
htmlcss
wildor
wildor

Reputation: 11

print issues,when i print the main part, there is always a margin in the left,can i print main part occupied the full page

can i print the main part without left blank? thanks

i'm trying to print the main part,but i don't need the left margin when i right click and print.

does anyone encounter this print issue and please help me with this, thanks

<html>

<head>
  <style>
    @media print {
      .header,
      .nav {
        display: none;
      }
    }
    
    body {
      position: relative;
    }
    
    .header {
      position: fixed;
      left: 0;
      top: 0;
      height: 50px;
      width: 100%;
      background-color: brown;
    }
    
    .nav {
      position: fixed;
      left: 0;
      top: 50px;
      width: 150px;
      height: 100%;
      background-color: yellow;
    }
    
    .main {
      position: absolute;
      top: 50px;
      left: 150px;
      background-color: blueviolet;
    }
  </style>
  <title>Document</title>
</head>

<body>
  <div class="header">1</div>
  <div class="nav">2</div>
  <div class="main">33333333333333333333333333333333333333333333333333333333333333333333</div>
</body>

</html>

Upvotes: 1

Views: 95

Answers (1)

Aalexander
Aalexander

Reputation: 5004

You are setting here in .main{left: 150px;} the margin to the edge. As quick fix you can just reduce its value.

For Grid Based layouts CSS has something called CSS-Grid. There you can define your own grid means specify the amount of column and rows and also its size. Then place your elements inside this grid.

This would be a good choice for your task.
Here you can read more

I made you an example to demonstrate how it works You have and wrapper element here the div with the class name container where you define your grid like How many Columns? How many rows? Which size has each row and each column.

grid-template-columns: 1fr 4fr;
grid-template-rows: 50px 500px;

Then inside your elements you can set its position for example second row first column

.nav {
  grid-column: 1;
  grid-row: 2;
  background-color: yellow;
}


.container {
  display: grid;
  grid-template-columns: 1fr 4fr;
  grid-template-rows: 50px 500px;
}

.header {
  grid-column: 1 / 3;
  grid-row: 1;
  background-color: brown;
}

.nav {
  grid-column: 1;
  grid-row: 2;
  background-color: yellow;
}

.innerMain {
  background-color: blueviolet;
}
<html>

<head>

  <title>Document</title>
</head>

<body>
  <div class="container">
    <div class="header">1</div>
    <div class="nav">2</div>
    <div class="main">
      <div class="innerMain">33333333333333333333333333333333333333333333333333333333333333333333</div>
    </div>
  </div>
</body>

</html>

Upvotes: 1

Related Questions