身体元素超出身体

时间：2018-11-19 06:41:11

标签： html css 

body {
  margin: 0px;
  border: 1px solid black;
}

#head {
  text-align: center;
  background: linear-gradient(to right, cyan, purple);
  margin: 0px;
  padding: 20px;
  border: 1px solid black;
}

#head h1 {
  margin: 0px;
  font-family: 'Great Vibes', cursive;
  color: white;
  font-size: 40px;
}

.contianer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.ops {
  display: flex;
  justify-content: center;
  border-bottom: 1px solid black;
  border-top: 1px solid black;
}

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

#list li {
  float: left;
  padding: 0px;
  margin: 0px;
}

#list li:hover {
  background-color: lightgrey;
}

#list {
  display: flex;
  justify-content: center;
  margin: 10px;
}

form {
  padding: 0px;
  margin: 0px;
}

.dhund {
  display: flex;
  justify-content: center;
  padding: 10px;
}

input[name="name"] {
  max-height: 37px;
  max-width: 400px;
  min-width: 200px;
  border-radius: 10px;
  font-size: 17px;
  border: 1px solid black;
  padding: 5px;
  margin: 5px;
}

input[name="search"] {
  background-color: rgb(183, 242, 184);
  font-size: 15px;
  border: 1px solid black;
  border-radius: 5px;
  color: black;
}

input[name="logout"],
input[name="chat"],
input[name="update"],
input[name="homepage"],
input[name="event"] {
  background-color: white;
  border: none;
  padding: 10px 19px;
}

input[name="logout"]:hover,
input[name="chat"]:hover,
input[name="update"]:hover,
input[name="homepage"]:hover,
input[name="event"]:hover {
  background-color: lightgrey;
}

.content {
  display: flex;
  flex-direction: row;
}

.sidebar {
  display: flex;
  flex-direction: column;
  border-right: 1px solid black;
  height: 100%
}

#image {
  margin: 2px;
  padding: 5px;
  display: flex;
  justify-content: center;
}

#image img {
  border: 1px solid black;
}

#upload {
  border-top: 1px solid black;
  margin: 2px;
  min-width: 250px;
}

#upload p {
  text-align: center;
}

#stupid {
  display: flex;
  justify-content: center;
  margin: 5px;
}

.material {
  margin: 20px;
  min-width: 400px;
  border: 1px solid black;
  border-radius: 10px;
  background-color: lightgrey;
}

.posts {
  border: 1px solid black;
  margin: 17px;
  margin-top: 80px;
  border-radius: 7px;
}

.feed {
  padding: 20px;
}

.post p {
  padding: 5px;
}

.poster {
  padding-left: 10px;
  border-bottom: 1px solid black;
}

.poster p {}

#matter p {
  text-indent: 30px;
}

#matter {
  border: 1px solid black;
  margin: 8px;
  background-color: white;
  border-radius: 20px;
  padding: 20px;
}

.main {
  display: flex;
  flex-direction: column;
  margin: 5px;
  width: 100%;
}


/*#mind
{
	display: flex;
	flex-direction: row;
	justify-content: center;
	border: 1px solid black;
	border-radius: 8px;
	background-color: lightgrey;
}*/

textarea[name="mind"] {
  border-radius: 10px;
  border: 1px solid black;
  font-size: 15px;
  padding: 10px 5px 10px 5px;
}

input[name="post"] {
  width: 120px;
  height: 50px;
  background-color: powderblue;
  font-size: 17px;
}
<!DOCTYPE html>
<html>

<head>
  <title>The Joint.</title>
  <link rel="stylesheet" type="text/css" href="style1.css">
  <link href="https://fonts.googleapis.com/css?family=Great+Vibes|Slabo+27px" rel="stylesheet">
</head>

<body>
  <div id="head">
    <h1>The Joint.</h1>
  </div>

  <div class="contianer">
    <div class="ops">
      <div id="list">
        <ul>
          <li>
            <form action="homepage.php" method="GET"><input type="submit" name="homepage" value="Homepage"></form>
          </li>
          <li>
            <form action="homepage.php" method="GET"><input type="submit" name="update" value="Update"></form>
          </li>
          <li>
            <form action="homepage.php" method="GET"><input type="submit" name="chat" value="Chat"></form>
          </li>
          <li>
            <form action="homepage.php" method="GET"><input type="submit" name="event" value="Your Events"></form>
          </li>
          <li>
            <form action="homepage.php" method="GET"><input type="submit" name="logout" value="logout"></form>
          </li>
        </ul>
      </div>
    </div>
    <div class="dhund">
      <form method="POST" action="homepage.php">
        <input type="text" name="name" placeholder="Search for People or things">
        <input type="submit" name="search" value="search">
      </form>
    </div>
    <div class="content">

      <div class="sidebar">
        <div id="visual">
          <div id="image">
            <img src="<?php echo $avatar ?>" width="200" height="250">
          </div>
          <div id="upload">
            <form action="homepage.php" method="POST" enctype="multipart/form-data">
              <p>Upload Pic:</p><input type="file" name="img"><br>
              <div id="stupid">
                <input type="submit" name="upload" value="Upload">
              </div>
            </form>
          </div>
        </div>
      </div>

      <div class="main">
        <div id="mind">
          <form method="GET" action="homepage.php">
            <textarea name="mind" cols="40" rows="5"></textarea>
            <input type="submit" name="post" value="Post">
          </form>
        </div>
        <div class="feed">
          <div class="posts">
            <div class="poster">
              <p><b>Poster</b></p>
            </div>
            <div class="post">
              <p>It give me immense pleasure To announce the arrival of happening to your college, Embrace..!</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

我读过<body>标记内的所有内容都适合身体内部，并且身体会根据各个元素的宽度进行调整，但是我设计的网站似乎不在身体内部，我知道这一点是因为我给主体设置了边框，并发现在调整浏览器大小时内容超出了主体。为什么首先要发生这种情况？使网站全屏友好的最佳方法是什么？我也尝试使用vw代替px，这是个好主意吗？

1 个答案:

答案 0 :(得分：1)

一种方法是将主体变成内联块。
内联块默认具有与其内容相同的宽度，并且不限于窗口的宽度。

body {
  margin: 0px;
  border: 1px solid black;
  display: inline-block;  /* new */
}

#head {
  text-align: center;
  background: linear-gradient(to right, cyan, purple);
  margin: 0px;
  padding: 20px;
  border: 1px solid black;
}

#head h1 {
  margin: 0px;
  font-family: 'Great Vibes', cursive;
  color: white;
  font-size: 40px;
}

.contianer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.ops {
  display: flex;
  justify-content: center;
  border-bottom: 1px solid black;
  border-top: 1px solid black;
}

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

#list li {
  float: left;
  padding: 0px;
  margin: 0px;
}

#list li:hover {
  background-color: lightgrey;
}

#list {
  display: flex;
  justify-content: center;
  margin: 10px;
}

form {
  padding: 0px;
  margin: 0px;
}

.dhund {
  display: flex;
  justify-content: center;
  padding: 10px;
}

input[name="name"] {
  max-height: 37px;
  max-width: 400px;
  min-width: 200px;
  border-radius: 10px;
  font-size: 17px;
  border: 1px solid black;
  padding: 5px;
  margin: 5px;
}

input[name="search"] {
  background-color: rgb(183, 242, 184);
  font-size: 15px;
  border: 1px solid black;
  border-radius: 5px;
  color: black;
}

input[name="logout"],
input[name="chat"],
input[name="update"],
input[name="homepage"],
input[name="event"] {
  background-color: white;
  border: none;
  padding: 10px 19px;
}

input[name="logout"]:hover,
input[name="chat"]:hover,
input[name="update"]:hover,
input[name="homepage"]:hover,
input[name="event"]:hover {
  background-color: lightgrey;
}

.content {
  display: flex;
  flex-direction: row;
}

.sidebar {
  display: flex;
  flex-direction: column;
  border-right: 1px solid black;
  height: 100%
}

#image {
  margin: 2px;
  padding: 5px;
  display: flex;
  justify-content: center;
}

#image img {
  border: 1px solid black;
}

#upload {
  border-top: 1px solid black;
  margin: 2px;
  min-width: 250px;
}

#upload p {
  text-align: center;
}

#stupid {
  display: flex;
  justify-content: center;
  margin: 5px;
}

.material {
  margin: 20px;
  min-width: 400px;
  border: 1px solid black;
  border-radius: 10px;
  background-color: lightgrey;
}

.posts {
  border: 1px solid black;
  margin: 17px;
  margin-top: 80px;
  border-radius: 7px;
}

.feed {
  padding: 20px;
}

.post p {
  padding: 5px;
}

.poster {
  padding-left: 10px;
  border-bottom: 1px solid black;
}

.poster p {}

#matter p {
  text-indent: 30px;
}

#matter {
  border: 1px solid black;
  margin: 8px;
  background-color: white;
  border-radius: 20px;
  padding: 20px;
}

.main {
  display: flex;
  flex-direction: column;
  margin: 5px;
  width: 100%;
}


/*#mind
{
	display: flex;
	flex-direction: row;
	justify-content: center;
	border: 1px solid black;
	border-radius: 8px;
	background-color: lightgrey;
}*/

textarea[name="mind"] {
  border-radius: 10px;
  border: 1px solid black;
  font-size: 15px;
  padding: 10px 5px 10px 5px;
}

input[name="post"] {
  width: 120px;
  height: 50px;
  background-color: powderblue;
  font-size: 17px;
}
<!DOCTYPE html>
<html>

<head>
  <title>The Joint.</title>
  <link rel="stylesheet" type="text/css" href="style1.css">
  <link href="https://fonts.googleapis.com/css?family=Great+Vibes|Slabo+27px" rel="stylesheet">
</head>

<body>
  <div id="head">
    <h1>The Joint.</h1>
  </div>

  <div class="contianer">
    <div class="ops">
      <div id="list">
        <ul>
          <li>
            <form action="homepage.php" method="GET"><input type="submit" name="homepage" value="Homepage"></form>
          </li>
          <li>
            <form action="homepage.php" method="GET"><input type="submit" name="update" value="Update"></form>
          </li>
          <li>
            <form action="homepage.php" method="GET"><input type="submit" name="chat" value="Chat"></form>
          </li>
          <li>
            <form action="homepage.php" method="GET"><input type="submit" name="event" value="Your Events"></form>
          </li>
          <li>
            <form action="homepage.php" method="GET"><input type="submit" name="logout" value="logout"></form>
          </li>
        </ul>
      </div>
    </div>
    <div class="dhund">
      <form method="POST" action="homepage.php">
        <input type="text" name="name" placeholder="Search for People or things">
        <input type="submit" name="search" value="search">
      </form>
    </div>
    <div class="content">

      <div class="sidebar">
        <div id="visual">
          <div id="image">
            <img src="<?php echo $avatar ?>" width="200" height="250">
          </div>
          <div id="upload">
            <form action="homepage.php" method="POST" enctype="multipart/form-data">
              <p>Upload Pic:</p><input type="file" name="img"><br>
              <div id="stupid">
                <input type="submit" name="upload" value="Upload">
              </div>
            </form>
          </div>
        </div>
      </div>

      <div class="main">
        <div id="mind">
          <form method="GET" action="homepage.php">
            <textarea name="mind" cols="40" rows="5"></textarea>
            <input type="submit" name="post" value="Post">
          </form>
        </div>
        <div class="feed">
          <div class="posts">
            <div class="poster">
              <p><b>Poster</b></p>
            </div>
            <div class="post">
              <p>It give me immense pleasure To announce the arrival of happening to your college, Embrace..!</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

此解决方案的确使主体比宽屏幕上的窗口窄，但是您可以通过添加min-width来解决此问题。

相关问题
最新问题