html - body 元素走出 body-6ren

html - body 元素走出 body

转载作者：太空宇宙更新时间：2023-11-04 06:45:25

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> 中的所有内容标签将适合主体内部，主体将根据各个元素的宽度进行调整，但我设计的网站内容似乎超出了主体，我知道是因为我给主体一个边框，发现内容去当我调整浏览器大小时，在 body 外面。为什么首先会发生这种情况？制作全屏友好网站的最佳方法是什么？我也尝试使用 vw而不是 px这是个好主意吗？

最佳答案

一种方法是将正文变成内联 block 。
默认情况下，内联 block 与其内容的宽度相同，并且不受窗口宽度的限制。

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 来解决这个问题。

关于html - body 元素走出 body ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53369521/

文章推荐： python - 这个 "referenced before assignment"怎么样？

文章推荐： c - 使用数组实现最小堆

文章推荐： java - 使用 GAE/Java 运行 DataNucleus JPA 时出现问题

文章推荐： python - 在 Python 中给一个类起别名

swift - 他们是否对哪个 body 是 body 和 body 什么时候开始做出任何保证(_ :) is called?
当调用 func didBegin(_ contact: SKPhysicsContact) 的 SKScene 中发生接触时，需要确定哪个 SKPhysicsBody 是contact.bodyA
html - body 内的元素不适合 body
HTML: CSS: body { width : 1000px ; } header { width : 100% ; } 如果有这样的代码，我认为页眉的宽度将与主体的
php - body 图像定位与 body
我刚刚通过网站完成设计，现在我正在尝试将整个 body 布置成一个整体，而不是不断重复的瓷砖。请问我该怎么做？我不确定我说的是否有道理，但就像一张墙纸在拉伸(stretch)，而不是 30 个小瓷砖
html - body 包装上的滚动条而不是 body
我试图在我的内部包装器上获得一个滚动条，而不是主体本身: CSS body { overflow: hidden; } #body_wrap { overflow-y: auto;
html - body 元素走出 body
body { margin: 0px; border: 1px solid black; } #head { text-align: center; background: linea
html - 我最近看到一个 CSS 文件，其中分别定义了 "body"和 ".body"。为什么要在 ".body"类中放置描述？
关闭。这个问题是opinion-based .它目前不接受答案。想要改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它. 关闭 9 年前。 Improv
html - css 选择器 : difference between "body h1", "body .h1"和 "body.h1"
我试图了解此 CSS 规则将应用于哪些元素: body h1, body .h1 { font-family: 'Open Sans', sans-serif !important;
express - Jade模板中的 `body!= body`是什么意思？
此问题与使用 Jade templates 有关与 Express.js . 我知道当我写 layout.jade其中包含: !!! html body != body hea
css - body 上的不透明度不影响 body 上的背景颜色
我正在尝试为 body 设置不透明度。但是，我遇到了一个问题。在body 上设置不透明度时，只有它的内容会受到影响。背景不受不透明度的影响。 $("button").click(function(
java - box2d body 穿过其他 body
我的游戏中有两个对象:球和星星球是静态或动态的物体。对于明星: 我需要知道星星何时与球相撞但它需要穿过小球并且不受碰撞影响我应该怎么做？谢谢袜套最佳答案您想使用 Sensors (6.
javascript - 关闭 body 点击菜单和动画 body
我以前问过这个问题，但所有答案都不起作用，所以我有一个示例页面，webpage .我有一个重新调整大小的菜单，我想在菜单外单击时关闭菜单，以及在第一次切换下拉菜单时让主体向下动画，这样下拉菜单就不会隐
jquery - 使水井漂浮在 body 上而不是将元素插入 body
我有一个漂浮在我其余内容上的井。我遇到的问题是，当它加载页面时，它会下推其余内容。我该如何更改它以便它悬停在所有内容上并且不会在页面加载时将内容下推。这是页面加载的图像。这是向下滚动页面的图片请
html - body 和 #body 有什么区别
在我的代码中我有这个: #body { background-color: #efeeef; clear: both; padding-bottom: 35px; } 还有这个
jquery - 获取字符串中的内容
我想做以下事情。 $("a").click(function (event) { event.preventDefault(); $.get($(this).attr("href"),
python - body 是什么？ `from fastapi import Body`
在documentation在其他地方，我看到使用了 Body 但不知道它是什么。谁能解释一下这三个选项是什么意思？ from fastapi import Body from pydantic i
javascript - 在不使用标签的情况下设置 body onload
我试图在 body 加载后触发一个功能。我知道你可以从 body 标签中做到这一点，但如果可能的话，我更愿意从 JS 中做到这一点。例如:document.getElementsByTagName(
当我旋转 body 时，Pymunk body 的形状不会旋转
在 Pymunk 中，当我旋转一个物体时，它的形状并没有旋转。当我施加一个冲动时，形状会如预期的那样同步移动。我的谷歌搜索表明 body 的形状应该在 body 旋转时旋转。我是否从根本上误解了旋转？
jquery - 标签正在从 jQueryMobile 插入到我的文档的头部
在我的移动网站/应用程序中使用 jQueryMobile 时，我刚刚开始遇到非常奇怪错误编辑我正在添加图片，可能更容易理解问题 edit2 我发现了这个问题。仍然好奇为什么会这样如果您想查看原
javascript - 使多部分 "fluid body"充当一个单一的 body
我正在使用 Phaser.js 及其 p2 物理来模拟“流体”。你可以在this中看到创建一种流体体的示例(归功于 John Watson)。唯一可能的交互是鼠标移动。我注意到一些有趣的特性可能有助
html - body > :not(element) and :not(body> element)? 有什么区别
我认为是后一项， :not(body> element) 说明 body 标签中的所有“元素”元素。这是否与同义 body >:not(element) ?? 最佳答案 body >:not(ele

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - body 元素走出 body