在内容发生变化时,在Reactjs更改中创建动态页脚?

时间:2018-02-28 10:40:29

标签: html css

我有html和外部css文件,其中页脚应始终保持低调天气内容或多或少!!

这是一个正在运行的代码段:

.Footer-create
    {
      position: relative;
      background-color: red;
    }
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="./styling.css">
  </head>
  <body class="body_change">
    <p>Ten weeks before he died, Mr. Mohun Biswas, a journalist of Sikkim Street, St. James, Port of Spain, was sacked. He had been ill for some time. In less than a year he had spent more than nine weeks at the Colonial Hospital and convalesced at home for even longer. When the doctor advised him to take a complete rest the Trinidad Sentinel had no choice. It gave Mr. Biswas three months’ notice and continued, up to the time of his death, to supply him every morning with a free copy of the paper.
    Mr. Biswas was forty-six, and had four children. He had no money. His wife Shama had no money. On the house in Sikkim Street Mr. Biswas owed, and had been owing for four years, three thousand dollars. The interest on this, at eight per cent, came to twenty dollars a month; the ground rent was ten dollars. Two children were at school. The two older children, on whom Mr. Biswas might have depended, were both abroad on scholarships.
    It gave Mr. Biswas some satisfaction that in the circumstances Shama did not run straight off to her mother to beg for help. Ten years before that would have been her first thought. Now she tried to comfort Mr. Biswas, and devised plans on her own.
    “Potatoes,” she said. “We can start selling potatoes. The price around here is eight cents a pound. If we buy at five and sell at seven—”
    “Trust the Tulsi bad blood,” Mr. Biswas said. “I know that the pack of you Tulsis are financial geniuses. But have a good look around and count the number of people selling potatoes. Better to sell the old car.”
    “No. Not the car. Don’t worry. We’ll manage.”
    “Yes,” Mr. Biswas said irritably. “We’ll manage.”
    No more was heard of the potatoes, and Mr. Biswas never threatened again to sell the
    car. He didn’t now  bought for two thousand and three thousand dollars, on a whole lot, in rising parts of the city. But these houses were old and decaying, with no fences and no conveniences of any sort. Often on one lot there was a conglomeration of two or three miserable houses, with every room of every house let to a separate family who couldn’t legally be got out. What a change from those backyards, overrun with chickens and children, to the drawing-room of the solicitor’s clerk who, coatless, tieless and in slippers, looked relaxed and comfortable in his morris chair, while the heavy red curtains, reflecting on the polished floor, made the scene as cosy and rich as something in an advertisement! What a change from the Tulsi house!
    The solicitor’s clerk lived in every house he built. While he lived in the house in Sikkim Street he was building another a discreet distance away, at Morvant. He had never married, and lived with his widowed mother, a gracious woman who gave Mr. Biswas tea and cakes which she had baked herself. Between mother and son there was much affection, and this touched Mr. Biswas, whose own mother, neglected by himself, had died five years before in great poverty.
    </p>
    <div class="Footer-create">
      Hello World
    </div>
  </body>
</html>
    

我想把这个页脚放在页面的底部!

如果内容超出页面,页脚只能在滚动时看到,该怎么办?

如果内容超过单个页面或小于单个页面,这应该同时生效,应该有效地涵盖这两种类型的内容。

2 个答案:

答案 0 :(得分:0)

这样的东西应该有效,你应该在IE中检查并在必要时进行调整。

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.Footer-create {
  margin-top: auto;
}

答案 1 :(得分:-1)

只需在CSS和div

中设置此类
.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  text-align: center;
 }