javascript - 根据里面的信息调整div的大小-6ren

javascript - 根据里面的信息调整div的大小

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

24

4

我有一个容器，我想在其中保存信息(会定期更新)。但有时，我可能希望此信息或长或短，为此我无法在容器上设置固定高度，因此应根据文本/信息的数量调整大小。这是我的脚本。

HTML:

<html>
<head>
<title>LoL Champs</title>
<link rel="stylesheet" type="text/css" href="css/css.css">
<link href='http://fonts.googleapis.com/css?family=Sansita+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Belleza' rel='stylesheet' type='text/css'>
</head>
<body>

<!-- NAVIGATION --> 
<div id="nav-bar">
    <div id="nav-bar-title">LoL Champs</div>
    <ul>
    <li><a href="">Champs</a></li>
    <li><a href="">Info</a></li>
    <li><a href="">Guides</a></li>
    <li><a href="">Model Viewer</a></li>
    <li><a href="">Lists</a></li>
    </ul>
</div>
<!-- END NAVIGATION -->

<div id="main-body">
<div id="nav-body-divider"></div>

<p id="home-body-title">News</p>
<!-- News Container -->
<div id="news-container">

</div>

</div>

</body>
</html>

和 CSS:

/** MAIN PAGE CONFIG CSS **/

html, body {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    max-width: 1920px;
    max-height: 1050px;
    font-size: 100%;
}

html { 
  background: url(../images/JinxBG.jpg) 0 0 fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

p {
    color: white;
}

a:link {color: inherit;}
a:visited {color: inherit;}
a:active {color: inherit;}
a {text-decoration: none;}
/** MAIN CSS **/

/**NAVIGATION**/
#nav-bar {
    width: 100%;
    height: 10%;
    background-color: #A62D2D;
    position: fixed;
    box-shadow: 0px 2px 9px black;
    font-size: 100%;
    max-height: 10%;
    max-width: 100%;
}

#nav-bar-title {
    font-family: 'Sansita One';
    color: #262424;
    position: absolute;
    width: 20%;
    height: 100%;
    left: 0.3%;
    font-size: 1.8em;
    max-width: 16%;
    margin-top: 1.2%;
}

#nav-bar ul {
    list-style-type: none;
    color: #2E2C2C;
    font-family: 'Belleza';
    font-size: 1.5em;
    position: absolute;
    top: 0;
    max-width: 100%;
    max-height: 100%;
    left: 15%;
    line-height: 0%;
    margin-top: 0;
    margin-bottom: 10%;
    top: 50%;
}
#nav-bar li {
    margin-right: 45px;
    display: inline;
    height: 100%;
    -webkit-transition: color 0.5s ease;
}
#nav-bar li:hover {
    color: #C7C7C7;
    -webkit-transition: color 0.5s ease;
}

/** END NAVIGATION **/

/** MAIN TEXT BODY **/
#nav-body-divider {
    width: 100%;
    height: 1px;
    background: #B55050;

}

#main-body {
    max-width: 100%;
    max-height: 90%;
    background: #A62D2D;
    width: 70%;
    height: 100%;
    margin: auto;
    position: relative;
    top: 10%;
}

/** MAIN BODY NEWS **/

#home-body-title {
    font-size: 2.4em;
    font-family: Belleza;
    color: #C98A5D;
    position: relative;
    left: 3%;
    top: 0%;
}

#news-container {
    width: 45%;
    height: 40%;
    background: #CF4040;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    position: relative;
    left: 3%;
}

我想调整 news-container 的大小，以便它适应其中的内容量，但只根据高度调整它的大小。宽度应保持不变。另外，如果 div 更大，我如何移动该 div 下面的对象以容纳页面的更下方并为大容器腾出空间？

干杯，尼克

最佳答案

你不应该在任何东西上设置高度。始终让内容自然增长。 http://jsfiddle.net/LQkj3/

<div id="news-container">
  <p>
    This is the news section! height will automatically grow depending on the amount of data! you should NEVER control height with pixels or percentage! always let the content grow it automatically.
  </p>
</div>


<style>
#news-container { width: 45%; background: #CF4040; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; position: relative; left: 3%;  padding: .5em 1em; }
</style>

...除非您当然需要一个可滚动的容器(如@griegs 建议的那样)。 ;)

然后你可以设置一个 max-width: 10em;或类似的东西。

关于javascript - 根据里面的信息调整div的大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19554250/

24

4

0

文章推荐： javascript - 检查字符串之间的不匹配词

文章推荐： c++ - 使用 Cg 渲染到屏幕外帧缓冲区对象的示例

文章推荐： c++ - 在 eclipse 控制台中显示信息

c# - foreach 里面 foreach 里面 foreach
在我的应用程序中，我使用 scrape(string url) 方法从网页中抓取链接。可以说它每次都返回我 10 个 url。我想从每个抓取的 url 中抓取 10 个链接。长话短说: (第 1
php - 把 php 放在 javascript 里面，也就是 php 里面
正如标题所说，我需要将 php 放入由 php 回显的 javascript 中例如: if (something) then (some php)') ?> 这不是真正的代码，只是可能有助于理解
javascript - orderBy angularJS 在 ng-switch 里面 ng-repeat 里面？
我有一个 ng-repeat 使用 ng-switch 来分隔 ng-repeat 内部的部分，我想在 ng-switch 组上应用一个 orderby 过滤器，但我似乎无法让它工作:
shell # 里面 (( ))
我是 shell 的新手。我不太了解以下功能。这个函数基本上把小时加1。我想知道为什么开发人员在 $g_current_hour+1 前面放了“10#”。根据我的理解，shell 中的剂量 # 是指
MongoDB $in 里面 $cond
为了在 MongoDB 中对元素进行分组和计数，我已经筋疲力尽了。有很多帖子，但没有一个是我需要的。这是一个基于以下内容的示例: styvane answer db.VIEW_HISTORICO.a
c++ - Cout 里面 while？
int main() { int count = 0; string prev = " "; string current; while (cin>>current)
浅谈SwiftUI 里面$0是什么意思如何用
$0表示传递给swift闭包的第一个参数，是swift语言的语法糖。swift会自动为内联闭包提供速记参数名称，可使用$0，$1，$2等名称来引用闭包参数的值。代码
vba - VB。如果有多个 Or 里面
我想把这个 If 放在宏中，但它总是给我一个错误。我不知道“或”用得是否正确。 Dim SMAT As String SMAT = "blahblahblah" (...) If Ce
JQuery:如何在悬停时设置此样式并删除其他样式？ [JSFiddle 里面]
这是 JSFiddle 链接:https://jsfiddle.net/fmdsu9Lo/ 我想添加一个悬停功能，以便将鼠标悬停在菜单上将在该菜单选项卡上应用 .current 样式，同时将其从当前打
php - 在 SELECT 里面
是否可以在 SQL 中执行类似的操作？ SELECT SUM(jobRequirements.number) as total, SUM(jobRequirements.number WHER
MySQL:WHERE IN 和 JOIN 里面
我有 3 个 SQL 表。游戏 wo_tenis_partidos 选择 wo_tenis_pronosticos 配额 wo_tenis_cuotas_ha2 我需要获取满足两个条件的所有行: 条
php - mysql group_concat 里面 while
我有这张乘客表日期: 这意味着在 Reservation 000004 中，有两个行程，分别是 Itinerary 0000010 (AAC Hangar - Anvaya Cove) 和 00000
Javascript 写在
里面
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。已关闭 9 年前。此问题是由拼写错误或无法再重现的问题引起的。虽然类似的问题可能是 on-topic在这里
javascript - bootstrap Popover 里面
我在模态框内显示一个弹出窗口，我可以在关闭时隐藏它，但在点击模态框外时无法隐藏它。我试着在关闭时隐藏它，这很好。代码在这里 $('.close, .close-button').click(funct
c# - 所有的逻辑应该写在 Controller 里面？
我所在的团队正在使用 MVC 架构开发 C# 程序。当我完成 MVC 教程时，我有一些疑问。请帮我澄清一下这个疑惑。 1) Controller 可以对 View 进行哪些修改？ 2)我认为所有 U
c++ - #if 在#define 里面？
我正坐在一些通过#defines 生成大量代码的遗留代码上。现在我知道在 #define 中不可能有 #ifdef，但是 #if 可能吗？我想为特定类型添加一些特化。 (无需进行重大更改，例如使用模板
mysql - 如果在 concat 里面
这是我试图用来创建触发器的代码: -- Dumping structure for trigger kavanga_lead.click_links_insert DROP TRIGGER IF EX
c - #ifdef 里面#define
我想写这样的东西: #define COV_ON(x) \ #ifdef COVERAGE_TOOL \ _Pragma (CO
c - #ifdef 在#define 里面？
我在这样的定义的帮助下初始化一个结构数组: #define FLAGCODE(name) { #name, MNT_ ## name } struct { const char
jquery - $(this) 里面 $ ('#something' ).css({...})
我尝试将 css 和 jquery 应用于 div 元素，但它不接受 $(this) 参数。我想知道为什么我不能使用 $(this) 作为 div 元素的引用。 blabla.css({ 'top':

首页

博学

6Ren·AI

商城

javascript - 根据里面的信息调整div的大小